Vue搭建后台系统需要做的几点（持续更新中）

￡神魔★判官ぃ 2021-08-13 17:04 262阅读 0赞

## 前言 ##

持续更新

## 一、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>

[Elemnet ui]: https://element.eleme.cn/#/zh-CN/