關於對現階段vue項目的一些總結和感想

 

1、前言

　　現階段手上vue的項目差很少快完了，空閒之餘回反覆對整個項目的代碼結構、實現細節以及框架上的作了一些思考和優化。下面打算把想到的和重點實現的方法記錄一下。

2、回顧

　　對於常規操做，這裏不作過多的闡述，咱們只討論重點部分

　　1.登陸模塊：這塊咱們用了兩個校驗，一個是權限校驗一個是帳號校驗。第一個校驗經過以後執行第二個校驗，二者經過登陸成功，頁面跳轉。

　　　　

　　a.這裏網絡請求用的是axios，它是基於promise封裝的一個http庫，因此用了兩個.then()的鏈式寫法，固然也支持多個鏈式操做。第一個then方法是權限校驗，第二個then方法是帳號登陸校驗。若是是之前的ajax的話，這裏就須要在success方法裏面寫回掉了（又稱回調金字塔）;this.root是一個全局變量，這個後面在作解釋。

　　b.帳號校驗成功以後將我的信息存到vuex中，主要包括state,actions和mutations，state定義數據格式，view與actions交互，actions調用mutations定義的方法，mutations在改變state中的數據

　　

　　2.路由：使用動態路由和全局守衛，路由動態加載，router.beforeEach進行頁面攔截。具體請參考http://www.javashuo.com/article/p-tfyggkna-hk.html　　

　　a.獲取動態路由，push,addRoutes

b.全局守衛：根據登陸成功後state中的doctorId判斷

3.全局變量root（正式環境和開發環境的路徑）

　　區分正式環境和開發環境，須要在config文件中的dev.env.js和prod.env.js文件中作相應的配置

 　　a.dev.env.js配置，這裏配置開發環境地址

b.prod.env.js配置，這裏配置正式環境地址

 c.全局變量的使用

4.全局組件的註冊和在main.js中的引用，另外還有一個局部組件，二者需配合一塊兒使用。

 

 5.axios的攔截封裝:對各response的status進行判斷攔截，而後作出對應的動做.

6.利用scss實現總體換膚和字體大小的設置，具體實現請參考 http://www.javashuo.com/article/p-yyiufjle-hd.html

7.使用vue+dcloud的h5+API實現調用底層攝像頭、拍照上傳及其它一些原生功能，需用hbuilder打包後才能夠調試。

　　a.調用攝像頭或相冊選取圖片

　　b.建立任務、添加文件、開始上傳任務

8.使用騰訊雲Im（websdk）實現即時通訊  具體能夠參考：http://www.javashuo.com/article/p-cbpiximf-gz.html 及騰訊官方文檔 https://cloud.tencent.com/document/product/269

 

 

3、感想

　　最近利用空閒時間對總體項目的框架和內部代碼從新過了一遍，經過對比了其它的項目結構和具體的各技術實現方案，確實看到了以往在專一開發過程所沒注意到的東西，有宏觀的、微關的。儘管目前項目並非很最好的狀態，但經過這次的思考讓我對整個項目有了從新的認識，也讓本身前進了一小步。該項目使用了vue+Dcloud兩種框架，dcloud主要使用了其所提供的api實現一些原生的功能。本篇文章因爲沒有具體介紹實施的細節，只想作一些項目上大的方向上的交流。若是你們有什麼的好的想法和建議，歡迎留言一塊兒學習和交流。文章中若有不足之處，也但願各位大佬給與指正，謝謝。