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 常用代码技巧大收集
Feb 25 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP 数字左侧自动补0
2008/03/31 PHP
php实现jQuery扩展函数
2009/10/30 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
JS实现吸顶特效
2020/01/08 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
介绍一下linux的文件权限
2012/02/15 面试题
法学专业毕业生自荐信
2014/06/11 职场文书
合作协议书格式范本
2016/03/21 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
解析目标检测之IoU
2021/06/26 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript