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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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
第三节--定义一个类
2006/11/16 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
php的常量和变量实例详解
2017/06/27 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
django和flask哪个值得研究学习
2020/07/31 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python 实现进度条的六种方式
2021/01/06 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
中学门卫岗位职责
2013/12/26 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
golang实现浏览器导出excel文件功能
2022/03/25 Golang