Vue搭建后臺系統(tǒng)需要注意的問題

更新時間：2019年11月08日 09:20:58 作者：Vam的金豆之路

這篇文章主要介紹了Vue搭建后臺系統(tǒng)需要做的幾點，文中給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

一、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搭建后臺系統(tǒng)需要注意的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: