Vue搭建后台系统需要注意的问题


Posted in Javascript onNovember 08, 2019

一、UI框架

推荐 Elemnet ui

二、图表

vue-schart

npm install vue-schart -S

<template>
  <div id="app">
    <schart :canvasId="canvasId"
      :type="type"
      :width="width"
      :height="height"
      :data="data"
      :options="options"
    ></schart>
  </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
  data() {
    return {
      canvasId: 'myCanvas',
      type: 'bar',
      width: 500,
      height: 400,
      data: [
        {name: '2014', value: 1342},
        {name: '2015', value: 2123},
        {name: '2016', value: 1654},
        {name: '2017', value: 1795},
      ],
      options: {
        title: 'Total sales of stores in recent years'
      }
    }
  },
  components:{
    Schart
  }
}
</script>

三、富文本编辑器

vue-quill-editor

npm install vue-quill-editor

npm install quill

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
<template>
 <div class="edit_container">
    <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <button v-on:click="saveHtml">保存</button>
  </div> 
</template>
<script>
export default {
 name: 'App',
 data(){
   return {
      content: `<p>hello world</p>`,
      editorOption: {}
    }
 },computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },methods: {
    onEditorReady(editor) { // 准备编辑器
    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){}, // 内容改变事件
    saveHtml:function(event){
     alert(this.content);
    }
  }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

四、markdown编辑器

npm install mavon-editor --save

<template>
  <div>
   <mavon-editor ref="editor" v-model="doc"> </mavon-editor>
  </div>
</template>
<script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  name: "Create",
  components: {mavonEditor},
  data(){
   return {
    doc: '',
   }
  }
}
</script>

总结

以上所述是小编给大家介绍的Vue搭建后台系统需要注意的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 #Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 #Javascript
You might like
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
JS input 数字验证代码
2009/07/30 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
javascript生成大小写字母
2015/07/03 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
python线程池的实现实例
2013/11/18 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
母亲节感恩寄语
2014/02/21 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
药品开票员岗位职责
2015/04/15 职场文书