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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JavaScript修改css样式style
Apr 15 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
详解javascript对数组和json数组的操作
Apr 15 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript编程起步(第二课)
2007/01/10 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
基于vue的换肤功能的示例代码
2017/10/10 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python中生成Epoch的方法
2017/04/26 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
班主任先进事迹材料
2014/12/17 职场文书
主婚人致辞精选
2015/07/28 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis