preface

Vue-cli-generated template also needs to be configured with axios, Vuex, Element and other plug-ins. These commonly used plug-ins are configured in this project. Template can be quickly reused in the project development, but also can quickly start a demo of VUE;

1. Dynamic renderings

2. Technology stack

  1. Vue + Vue-Router + Webpack + AXIos +echarts+ uEditor + Element UI+ Map + Node-sass;
  2. Function modules: data visualization, map, add and delete of common forms, edit forms, merge forms, the left menu can be expanded;
  3. Adaptation: the use of percentage layout, suitable for all PC models;
  4. Objective: To develop project templates that can be reused quickly.

3. Detailed technical points

  1. Props +$emit: props+$emit: props+$emit
  2. Axios: axios. Interceptors. Request (response) realize axios global intercept axios. The get request interface (post)
  3. Vuex: implements modular management of common data and communication between non-parent and child components. 4. Vuex-persistedstate: implements cache of VUEX data
  4. Amap: Map display
  5. The uEditor is a rich text editor that encapsulates common tool classes
  6. Element UI+ Slot: editable table
  7. Table: The original table implements table splitting and displays complex data

Github source address

This template will continue to be updated and improved in the future. Welcome star, thank you

4. Project Catalog

5. Core code analysis

5.1 Store module code

1. Entry index. Js

import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from Vuex-persistedstate import comTable from './modules/comTable' vue. use(vuex) export Default new vuex. Store({modules: {comTable// split Vuex into modules), plugins: [createPersistedState({storage: window.sessionStorage })] })Copy the code

2. Modules comtable.js

Import * as comTableApi from '@/ API /comTable'// initial state const state = {tableData: [], } // getters const getters = { allTableData: state => state.tableData, } // actions = {getAllData ({commit}) { comTableApi.getComAjax('static/comTable.json',{obj1:'',obj2:''},(tableData) => { commit('setTableData', Open mutations = {setTableData (state,tableData) {state.tabledata = const mutations = {setTableData (state,tableData) {state.tabledata = tableData } }Copy the code

3. Use two methods in. Vue: This. Codestore.table. state(distapch) can be set using mapGetters,mapActions helper functions:

import { mapGetters, mapActions } from "vuex"; computed: mapGetters({ tableData: "allTableData", }), mounted() { this.getAllData(); }, methods:{ ... MapActions (['getAllData'// call required]),}Copy the code

5.2 echarts module

The echarts website provides setOption parameters. You only need to obtain the DOM of the page and set the setOption property

let histogram = this.$echarts.init(document.getElementById("histogram")); Histogram. SetOption ({// The object parameter is obj title: {text: "ECharts introduction "}, Tooltip: {}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"] / / transverse coordinate values}, yAxis: {}, series: [{name: "sales", type: "bar", data: [5, 20, 36, 10, 10, 20]}]})Copy the code

5.3 ueditor module

Place the downloaded static file in the static directory and import it in main.js in the corresponding vue file

this.editor = UE.getEditor('editor', this.config); // initialize UE this.editor.addListener("ready", function () {_this.editor.setContent(_this.defaultmsg); // Make sure UE is loaded before putting in the content. }); This.editor.getcontent ()// Gets rich text contentCopy the code

5.4 map

I am using amap to import globally in index.html

<script SRC = "http://webapi.amap.com/maps?v=1.4.6&key=9f63e48dcb3ccddc5cf6601788186f13&plugin=AMap.MouseTool" > < / script > / / the key for me to apply for , also can oneself apply forCopy the code

Amap official website case