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

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