vue中vuex,echarts,地圖,ueditor的使用

Cheriselalala 發布于2019-08-26 11:56 / 2970人閱讀

摘要：獲取富文本內容地圖我是使用高德地圖在全局導入為我申請的也可以自己去申請高德地圖官網案例

前言

今天是個好日子,大家六一快樂;
vue-cli生成的template還需要配置axios,vuex,element等插件,該項目中將這些常用插件進行了配置;
項目開發中template可以快速復用,也是可以快速上手vue的一個demo;

1.動態效果圖

2.技術棧

技術棧:vue+vue-router+webpack+axios+echarts+ueditor+element UI+map+node-sass;
功能模塊:數據可視化,地圖,普通表格的增刪,可編輯表格,合并表格，左側菜單可展收;
適配：使用百分比布局，適配pc所有機型；
目的:項目開發可以快速復用的項目模板；

3.詳細技術點

1.props+$emit:父子組件傳值;
2.axios:
axios.interceptors.request(response)實現axios的全局攔截
axios.get(post)請求接口
3.vuex:實現公共數據模塊化管理和非父子組件通訊
4.vuex-persistedstate:實現vuex數據的緩存
5.echarts:折線圖,柱狀圖,扇形圖和儀表等數據可視化
6.高德地圖:地圖展示
7.ueditor:富文本編輯器
8.utiles:里面封裝了常用工具類
9.element UI+slot:可編輯表格
10.table:原生table實現表格拆分,展示復雜數據

github源碼地址

戳這里
這個template后期會持續更新完善,歡迎star,謝謝噠

4.項目目錄

5.核心代碼分析 5.1store模塊代碼

1.入口index.js

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"http://可以將vuex數據緩存到sessionStorage中
import comTable from "./modules/comTable"
 Vue.use(Vuex)
    
 export default new Vuex.Store({
   modules: {
     comTable//將vuex拆分成模塊
   },
   plugins: [createPersistedState({ storage: window.sessionStorage })]
  })

2.modules下面comTable.js文件:

import * as comTableApi from "@/api/comTable"http://將請求接口文件拆分

// 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中的使用
兩種方法:
this.$store.comTable.state(distapch)可以設置
借助mapGetters,mapActions輔助函數:

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

5.2 echarts模塊

echarts官網提供了setOption的參數,只需要獲取頁面的dom,然后設置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 ueditor模塊

將下載好的static放到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 地圖

我是使用高德地圖,在index.html全局導入

//key為我申請的,也可以自己去申請

高德地圖官網案例

GPU云服務器云服務器 Vue_Vuex vue 中使用 webrtc vue中使用webrtc vue中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107866.html

iMap | 一款基于 Electron 和 Vue 的跨平臺旅行地圖生成器

摘要：請求錯誤請求代碼封裝與基本一致，只是將換成即可。關于的使用是個能把組件的共享狀態抽取出來，當做一個全局單例模式進行管理。首先確保你的已經安裝，運行來安裝。項目地址：https://huangxizhou.com/project/iMap 技術棧 Vue.js Vuex Axios Webpack Leancloud（express） Echarts Electron（electr...

dingda 2019-08-21 17:03 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vue全家桶+Echarts+百度地圖，搭建數據可視化系統（【續】接口篇）

摘要：接上篇全家桶百度地圖，搭建數據可視化系統前言業務場景實現數據監控的系統。有線圖柱狀圖地圖，并具有定時刷新的功能。本篇將介紹一下剩下的部分。接上篇vue全家桶+Echarts+百度地圖，搭建數據可視化系統 1 前言 1.1 業務場景實現數據監控的系統。有線圖、柱狀圖、地圖，并具有定時刷新的功能。 1.2 業務分析上一篇分析的步驟大致有：系統搭建vue-cli vuex...

hiyayiji 2019-08-26 13:57 評論0 收藏0