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

一、UI框架推荐Elemnetui二、图表vue-schartnpminstallvue-schart-S<template><divid="app"><schart:c

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