Использование vuex, echarts, maps и ueditor во vue (достаточно одной статьи)

Vue.js Vuex ECharts axios

предисловие

Шаблон, сгенерированный vue-cli, также необходимо настроить с помощью таких плагинов, как axios, vuex, element и т. д. Эти общие плагины настраиваются в этом проекте; Шаблон можно быстро повторно использовать при разработке проекта, а также это демоверсия, с помощью которой можно быстро начать работу с Vue;

1. Динамический рендеринг

2. Стек технологий

  1. Стек технологий: vue+vue-router+webpack+axios+echarts+ueditor+элемент UI+map+node-sass;
  2. Функциональные модули: визуализация данных, карта, добавление и удаление обычных таблиц, редактируемые таблицы, таблицы слияния, левое меню можно расширить;
  3. Адаптация: используйте процентную раскладку для адаптации ко всем моделям ПК;
  4. Цель: проект разрабатывает шаблон проекта, который можно быстро использовать повторно;

3. Подробные технические моменты

  1. props+$emit: значение передачи родительско-дочернего компонента;
  2. аксиомы: axios.interceptors.request(response) реализует глобальный перехват axios Интерфейс запроса axios.get(post)
  3. vuex: реализовать модульное управление общими данными и связь между компонентами, не являющимися родительскими и дочерними. 4 .vuex-persistedstate: реализация кэширования данных vuex. 5.echarts: визуализация данных, такая как линейные диаграммы, столбчатые диаграммы, веерные диаграммы и датчики.
  4. Карта Гаоде: отображение карты
  5. udeditor: редактор форматированного текста 8 .utiles: он инкапсулирует общие классы инструментов
  6. элемент UI+слот: редактируемая таблица
  7. таблица: собственная таблица реализует разделение таблицы и отображает сложные данные

исходный адрес гитхаба

кликните сюдаЭтот шаблон будет обновляться и улучшаться позже, добро пожаловать, звездочка, спасибо

4. Каталог проектов

5. Анализ основного кода

5.1 код модуля хранения

1. Введите index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'//可以将vuex数据缓存到sessionStorage中
import comTable from './modules/comTable'
 Vue.use(Vuex)
    
 export default new Vuex.Store({
   modules: {
     comTable//将vuex拆分成模块
   },
   plugins: [createPersistedState({ storage: window.sessionStorage })]
  })

2. Файл comTable.js под модулями:

import * as comTableApi from '@/api/comTable'//将请求接口文件拆分

// initial state
const state = {
  tableData: [],
}

// getters
const getters = {
  allTableData: state => state.tableData,
}

// actions,异步提交,将ajax相关代码写入这个属性,而后commit改变mutation
const actions = {
  getAllData ({ commit }) {
    comTableApi.getComAjax('static/comTable.json',{obj1:'',obj2:''},(tableData) => {
      commit('setTableData', tableData)
     })
  }
}

// mutations,同步提交,可以改变state的值
const mutations = {
  setTableData (state,tableData) {
    state.tableData = tableData
  }
}

3. Использование .vue Два пути: это $ store.comTable.state (distapch) может быть установлено С помощью mapGetters, помощника mapActions:

import { mapGetters, mapActions } from "vuex";
computed: mapGetters({
  tableData: "allTableData",
}),
mounted() {
  this.getAllData();
},
methods:{
  ...mapActions([
   'getAllData'//需要调用
]),}

5.2 Модуль электронных карт

Официальный сайт echarts предоставляет параметры setOption, вам нужно только получить дом страницы, а затем установить свойство setOption

let histogram = this.$echarts.init(document.getElementById("histogram"));//tempalte设置一个标签
 // 绘制图表
 histogram.setOption({//对象参数为obj
  title: { text: "ECharts 入门示例" },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]//横向坐标值
  },
  yAxis: {},
  series: [
  {
   name: "销量",
   type: "bar",
   data: [5, 20, 36, 10, 10, 20]
   }
   ]
   });

5.3 модуль редактора

Поместите загруженную статику в каталог static, импортируйте ее в main.js и в соответствующий файл vue.

this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
  _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
this.editor.getContent()//获取富文本内容

5.4 Карта

Я использую карту Gaode и импортирую ее глобально в index.html.

<script src="http://webapi.amap.com/maps?v=1.4.6&key=9f63e48dcb3ccddc5cf6601788186f13&plugin=AMap.MouseTool"></script>//key为我申请的,也可以自己去申请

Немецкий Высокий Официальный Чехол на сайт Карта

Категории