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 未结束的字符串常量错误解决方法
Jun 13 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
js前端如何写一个精确的倒计时代码
Oct 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
论坛头像随机变换代码
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python基于http下载视频或音频
2018/06/20 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
关于元旦的广播稿
2014/02/16 职场文书
法律专业自荐信
2014/06/03 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2015年药房工作总结
2015/04/25 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
复活读书笔记
2015/06/29 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers