Vueバックグラウンドシステムを構築するには注意が必要です。

一、UIフレーム
おすすめはElemnet uiです
二、グラフvue-schartnpm 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-editornpm install vue-quill-editornpm 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のバックグランドシステムを构筑する上で注意しなければならない问题です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。