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

 更新时间:2019-11-08 09:48:57   作者:佚名   我要评论(0)

一、UI框架
推荐 Elemnet ui
二、图表
vue-schart
npm install vue-schart -S



<template>
<div id="app">
<schart :canvasId="canvasId"
:type="typ

一、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搭建后台系统需要注意的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • vue 搭建后台系统模块化开发详解
  • 详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
  • vue中如何实现后台管理系统的权限控制的方法示例
  • 基于Vue实现后台系统权限控制的示例代码
  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

相关文章

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

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

    一、UI框架 推荐 Elemnet ui 二、图表 vue-schart npm install vue-schart -S <template> <div id="app"> <schart :canvasId="canvasId" :type="typ
    2019-11-08
  • BootstrapValidator实现表单验证功能

    BootstrapValidator实现表单验证功能

    BootstrapValidator是一款非常好用的表单验证插件,通过友好的错误提示能增加用户体验。 bootstrapvalidator源码下载 既然是表单验证,那我们最常用的就是用户登录界
    2019-11-08
  • vue中get请求如何传递数组参数的方法示例

    vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让
    2019-11-08
  • vue-dplayer 视频播放器实例代码

    vue-dplayer 视频播放器实例代码

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播
    2019-11-08
  • vue.js的简单自动求和计算实例

    vue.js的简单自动求和计算实例

    一、导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="http://files.jb51.net/file_images/article/201911/2019110809
    2019-11-08
  • flask框架自定义过滤器示例【markdown文件读取和展示功能】

    flask框架自定义过滤器示例【markdown文件读取和展示功能】

    本文实例讲述了flask框架自定义过滤器。分享给大家供大家参考,具体如下: 除了一些内置的join length safe等过滤器外, flask还提供了自定义过滤器的功能. 一. 自定
    2019-11-08
  • SpringBoot yml配置文件调用过程解析

    SpringBoot yml配置文件调用过程解析

    这篇文章主要介绍了SpringBoot yml配置文件调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1、y
    2019-11-08
  • shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    需求 批量实现自动发送公钥到远程主机 环境 firewalld:关闭 selinux:关闭 实现方式 sshpass命令 shell调用expect命令 sshpass命令 #
    2019-11-08
  • Django框架下静态模板的继承操作示例

    Django框架下静态模板的继承操作示例

    本文实例讲述了Django框架下静态模板的继承操作。分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下。 开发环境:pyt
    2019-11-08
  • vue视频播放暂停代码

    vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
    2019-11-08

最新评论