用vue+iview+less+echarts作的小系統,總結

這是以前寫的一個項目,在這裏面踩了不少坑(對我這種新手來講),在這裏分享出來

這是在線運行地址(阿里雲學生價9.9買到的,能放些圖片和打包後的網頁仍是挺良心的),代碼地址在這裏,裏面只有前端V1部分,爭取下個月用node+MDB作完後臺

前端定義的數據規範化

對於我這種剛開始用Vue作項目的菜鳥來講在組件數據定義方面犯了不少錯誤,尤爲是在這個頁面

在進行數據回選的時候本身重定義已經定好的數據,致使數據很是雜亂無章,具體在storeDetail.vue的14--321行,感受這麼多數據很是有必要的進行裁剪,用js進行運算把數據補充完整,這裏相對把後臺的任務減輕了不少,只是額外增長前端渲染數據的量

父子組件數據通信問題

剛開始寫Modal的時候對於Modal的開關modal父子組件共享的數據,而後在關閉的時候子組件改變了父組件傳遞的數據會報錯,也就是props的值

在這裏有2個解決方案,一個是用vuex共享Modal的開關(寫起來有點繞,代碼也不簡潔),另一個最好的方法是創建一個mixins文件夾,在mixins的js進行操做,關鍵代碼--->mixins/closeModal.js--->this.$emit('on-cancel',false),子組件經過emit使父組件發生on-cancel,響應一個事件,這樣寫可讓其餘多個子組件使用到Modal共用代碼

組件命名方式

在這裏我本身定義了文件夾採用了大駝峯命名法,例如文件夾Store,Shop,對於文件以及變量的命名採用小駝峯命名法,若是storeDetail.vue,parcelList.vue

多用flex

2018年flex將會是主流,兼容性問題也不必理睬,還有多注意grind佈局,可能也有流行了

多用懶加載

使用懶加載方便在低帶寬時候可以帶來更好的用戶體驗,在參考iview admin代碼我把懶加載的用法統一爲

{
    path:"/parcel-list",
    meta:{
      group:"parcel",
      item:"parcel-list"
    },
    component: resolve =>import('@/pages/Parcel/parcelList')
  }

側邊欄刷新問題

在這裏要注意到組件給了2個綁定的變量active-name,open-names,這裏咱們在路由設置的時候添加

meta:{
      group:"",
      item:""
    }

經過this.$route.meta.group,this.$route.meta.item就能夠與active-name,open-names進行匹配實現無刷新操做

記得多npm run build

iview這個組件有點問題,有時候就是修改Modal的樣式我明明在style(不帶scoped)標籤修改以後npm run dev樣式修改爲功,但是build以後樣式就又從新恢復,後來把樣式放在靜態文件夾中才能夠修改爲功,還有就是表格居中build以後以後不能居中,總之,多build問題早點發現早點解決是好事(切莫佛系~~~)

Echarts在VUE的使用

在這裏有個坑,在echarts實例化的時候在chart.vue有段代碼

<div :id="chart.id" style="height: 500px"></div>

 let myChart=this.$echarts.init(document.getElementById(this.chart.id))

在這裏注意到有個id,我在這裏之因此這樣作,把組件的id設爲變量主要是echarts官網文檔寫到在網頁中echarts實例化的div的id具備惟一性,因爲我這個chars組件須要屢次被被同一組件調用屢次因此是隻能將id設爲一個變量(這個真的坑,調了不少次上官方文檔看了好幾回才知道...).另外最好把把echars的數據封裝一遍

多寫公用組件

框架這種東西本質就是減小代碼,公用組件寫好了調用的時候使用數據渲染就能夠了,這樣就能大大減小代碼量,也符合MVVM的思想