成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Cheriselalala / 2983人閱讀

摘要：獲取富文本內(nèi)容地圖我是使用高德地圖在全局導(dǎo)入為我申請(qǐng)的也可以自己去申請(qǐng)高德地圖官網(wǎng)案例

前言 
今天是個(gè)好日子,大家六一快樂(lè);
vue-cli生成的template還需要配置axios,vuex,element等插件,該項(xiàng)目中將這些常用插件進(jìn)行了配置;
項(xiàng)目開(kāi)發(fā)中template可以快速?gòu)?fù)用,也是可以快速上手vue的一個(gè)demo;
1.動(dòng)態(tài)效果圖

2.技術(shù)棧

技術(shù)棧:vue+vue-router+webpack+axios+echarts+ueditor+element UI+map+node-sass;
功能模塊:數(shù)據(jù)可視化,地圖,普通表格的增刪,可編輯表格,合并表格，左側(cè)菜單可展收;
適配：使用百分比布局，適配pc所有機(jī)型；
目的:項(xiàng)目開(kāi)發(fā)可以快速?gòu)?fù)用的項(xiàng)目模板；

3.詳細(xì)技術(shù)點(diǎn)

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

github源碼地址

戳這里
這個(gè)template后期會(huì)持續(xù)更新完善,歡迎star,謝謝噠

4.項(xiàng)目目錄

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

1.入口index.js

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"http://可以將vuex數(shù)據(jù)緩存到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://將請(qǐng)求接口文件拆分

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

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

// actions,異步提交,將ajax相關(guān)代碼寫(xiě)入這個(gè)屬性,而后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)可以設(shè)置
借助mapGetters,mapActions輔助函數(shù):

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

echarts官網(wǎng)提供了setOption的參數(shù),只需要獲取頁(yè)面的dom,然后設(shè)置setOption屬性

let histogram = this.$echarts.init(document.getElementById("histogram"));//tempalte設(shè)置一個(gè)標(biāo)簽
 // 繪制圖表
 histogram.setOption({//對(duì)象參數(shù)為obj
  title: { text: "ECharts 入門(mén)示例" },
  tooltip: {},
  xAxis: {
    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]//橫向坐標(biāo)值
  },
  yAxis: {},
  series: [
  {
   name: "銷(xiāo)量",
   type: "bar",
   data: [5, 20, 36, 10, 10, 20]
   }
   ]
   });
5.3 ueditor模塊

將下載好的static放到static目錄下,在main.js引入,在對(duì)應(yīng)的vue文件中

this.editor = UE.getEditor("editor", this.config); // 初始化UE
this.editor.addListener("ready", function () {
  _this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內(nèi)容。
});
this.editor.getContent()//獲取富文本內(nèi)容
5.4 地圖

我是使用高德地圖,在index.html全局導(dǎo)入

//key為我申請(qǐng)的,也可以自己去申請(qǐng)

高德地圖官網(wǎng)案例

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107866.html

相關(guān)文章

  • iMap | 一款基于 Electron 和 Vue 的跨平臺(tái)旅行地圖生成器

    摘要：請(qǐng)求錯(cuò)誤請(qǐng)求代碼封裝與基本一致，只是將換成即可。關(guān)于的使用是個(gè)能把組件的共享狀態(tài)抽取出來(lái)，當(dāng)做一個(gè)全局單例模式進(jìn)行管理。首先確保你的已經(jīng)安裝，運(yùn)行來(lái)安裝。 項(xiàng)目地址：https://huangxizhou.com/project/iMap 技術(shù)棧 Vue.js Vuex Axios Webpack Leancloud（express） Echarts Electron（electr...

    dingda 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

  • vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)（【續(xù)】接口篇）

    摘要：接上篇全家桶百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)前言業(yè)務(wù)場(chǎng)景實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線(xiàn)圖柱狀圖地圖，并具有定時(shí)刷新的功能。本篇將介紹一下剩下的部分。 接上篇vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng) 1 前 言 1.1 業(yè)務(wù)場(chǎng)景 實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線(xiàn)圖、柱狀圖、地圖，并具有定時(shí)刷新的功能。 1.2 業(yè)務(wù)分析 上一篇分析的步驟大致有： 系統(tǒng)搭建vue-cli vuex...

    hiyayiji 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<