基於 Vue+Mint-ui 的 Mobile-h5 的專案說明
Vue作為前端三大框架之一，其已經悄然成為主流，學會用vue相關技術來開發專案會相當輕鬆。
對於還沒學習或者還沒用過vue的初學者，基礎知識這裡不作詳解，推薦先去相關官網，學習一下vue相關的基礎知識。
a. vue.js 官網 參考：https://cn.vuejs.org/
我的 github
一.搭建vue的相關環境與腳手架的說明
首先，要開發vue相關的專案，要會搭建vue的相關環境，要搭建的目錄如下：
1.安裝node.js和npm
2. webpack
3. vue-cli腳手架構建工具
具體這裡不作詳解，站在前人的肩膀上學習即可
安裝node.js和npm
webpack和vue-cli腳手架構建工具
二. vue-cli腳手架建立的程式碼詳解
利用腳手架（vue-cli）構建一個vue專案，接下來學習分析下程式碼。
具體這裡不作詳解，站在前人的肩膀上學習即可
教程參考： https://www.jianshu.com/p/2b661d01eaf8
三. 本專案 vue+mint-ui 的h5專案說明及詳解
1. 執行專案
因為專案配置和需要的模組都已經配好了的，所以執行只需要：
1.在svn上把 mobile-h5 專案程式碼下載下來。
2.直接進入mobile-h5目錄中，即是和 package.json 的檔案同級目錄，或者直接用vsCode編輯器開啟 mobile-h5 專案，在命令終端那裡。
- 安裝依賴，執行命令：
npm install 或者簡寫：
npm i沒有報錯時，安裝結果如圖：
安裝報錯時，會出現 error 的，或者直接中止了，window系統一般是因為npm 的環境沒有配置好。
- 安裝好模組後，再執行如下命令來執行
npm run dev沒有報錯時，結果會如下圖：
- 直接開啟本地連結 http://localhost:8080 就可訪問了，如下圖：
2. 專案目錄說明
都寫在 README.md 裡面了，具體的也可檢視 README.md 的內容。
#目錄結構 ├── mobile-h5 # 總專案目錄 ├── build # webpack 配置檔案目錄 ├── config # webpack 配置檔案引用的目錄 ├── kpi # webpack 打包正式生成的目錄 ├── src # 主開發檔案的目錄 │ ├── assets # 圖片資源 │ ├── components # 元件模組 | │ ├── app # 元件模組 | | | ├── add # 本專案指標新增的元件的模組 | | | ├── common # 元件通用的模組 | | | ├── index # 本專案首頁元件通用的模組 | | | ├── index # 本專案套餐元件通用的模組 │ ├── filters # 過濾器模組 │ ├── filters # 過濾器模組 │ ├── less # less 的公共樣式模組 │ ├── libs # 封裝的公共 js 檔案模組 │ ├── mixins # mixins 檔案模組 │ ├── router # 路由模組 │ ├── store # vuex 的 store 模組 │ ├── views # 主開發的 vue 模組 │ ├── ├── static # webpack 打包依賴的目錄 ├── index.html # 主頁面入口，也是生成打包生產環境程式碼要依賴的檔案
3. 修改webpack的配置，使其符合本專案的要示
- a. 因為本地開發時，請求介面會跨域的問題，所以要用代理。
具體說明 參考 https://my.oschina.net/lixiaoyan/blog/1797724
提示：要在手機上開發測試，npm run dev 執行的localhost是不行的，要配置nginx來做代理服務才行。
- b.把打包的目錄修改成生產環境需要的目錄 kpi。
- c. 新增別名，在其他地方引入檔案時，可以省略部分路徑的書寫
4. 開發目錄規範說明
a. 開發要根據 業務模組 來劃分，進而進行 檔案模組 的劃分。
比如：
- 元件components 裡面
components/common是全域性公共的元件，
components/app 是mobile-h5的開發元件
components/app/add mobile-h5的指標新增的元件
components/app/index 是mobile-h5的首頁的元件
components/app/setMeal 是mobile-h5的套餐的元件
- mixins 裡面
mixins/add 是mobile-h5的指標新增的 mixins
mixins/common 是mobile-h5的公共的 mixins
- modules 裡面
modules/add 是mobile-h5的指標新增的狀態資料儲存
modules/setMeal 是mobile-h5的套餐的狀態資料儲存
b. 開發連結的書寫。
- domain.js 是域名的配置, 只要統一配置一項即可，方便。
- urls.js 是請求的連結
比如： 新增收藏 https://baidu.com:8443/emm/favorite/save
因為引入了 domain.js 了
所以我們只需要在urls.js裡面寫： save(即別名): 'emm/favorite/save' 即可
c. 引入mock.js ，用來模擬請求介面資料，當後端介面還沒開發出來時，就大有用場了。
用法如下：
只要開啟 總開關，再開啟你要用mock資料的 具體介面的開關，介面就不會請求後臺的介面了，只用mock返回的資料。
d. css樣式書寫
用法：
比如上圖的，全省的寬 280px ,高 58px , 正常開發下，程式的css上需要寫
{
width: 280px;
height: 58px;
}但是我們只需要：
{
width: 280 / 100 rem;
height: 58 / 100 rem;
}也即是：
{
width: 2.8rem;
height: 0.58rem;
}換算公式就是具體: 畫素/100 = rem, 還能指定7.5rem 寬就是螢幕的總寬
而且無論手機大小是多少，因為設計了 config_width = 750 ，所以滿寬都是 7.5rem。
字型大小等也同理。
注意： 因為 phone的解析度高，所以 0.01rem 在 iphone真機上會不顯示，在 border設定的時候猶為明顯，至少要0.02rem 才行。
- 是因為引入了下面這個檔案，要了解具體的內容，請看 rem_config.js。
- 還有一個方法就是非常簡單的,在 js 裡面加入這句程式碼即可，寫css時，也可像上面一樣寫，效果和上面介紹的一樣。
// 螢幕適配（windowWidth/設計稿寬*100） ——*100為了方便計算。即font-size值是手機deviceWidth與設計稿比值的100倍
document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/7.5+'px';
// 如上：通過查詢螢幕寬度，動態的設定html的font-size值，設計稿大多以750*1334 設定的，通過上述換算後，在設計圖上一張150*150的圖，在css中對應的rem值則為：1.5*1.5reme. 其他
libs裡的檔案內容都是 內有乾坤的，開發人員都有必要了解一下，這裡就不多介紹了。
5. 推薦開發方式
vue和react一樣，可以元件化，所以推薦元件化開發的方式。
元件系統是 Vue 的一個重要概念，允許我們使用小型、獨立和通常可複用的元件構建大型應用。
參考vue官網，元件化 ：https://cn.vuejs.org/v2/guide/components.html
專案舉例：比如一個h5的首頁，可以分為標題元件，業務實時元件，關鍵指標元件，tab切換元件。這幾個元件的幾乎沒有聯絡，可以相互獨立。
當然你也可以再劃分成小元件，相同的模組抽成公共的小元件，這樣子達到程式碼重用的目的更好。比如首頁裡面大模組的 title 。
6. 專案用vuex 的講解
本專案vuex的用法 和官方的有點不一樣，所以這裡有必要做一下講解。
1. 儲存值 mutations
-1. 要用store來儲存值，都要先定義
比如：新增裡面要儲存關於 日 月 型別的切換：tabActiveType: ''，
要先在store模組的add裡面的initPageState 先定義，不然找不到，為取值會為undefined。
- 定義type，至於為什麼要大寫？因為當作常量來用，當然不大寫也可以，不過本專案要統一成大寫。
- mutatuons 寫一個方法來儲存值
- 呼叫儲存值,這裡的 SAVE_TAB_ACTIVE_TYPE 要與定義在第2中 type 裡面的對應，而且 物件裡的 key 要與initPageState裡面定義的對應，如 tabActiveType。
- 當然怎麼取值？只需要在元件的computed勾子像下面這樣子寫即可。
按照這5步，一個關於vuex的取值與偘儲存值就ok了！
2.那怎麼非同步action呢？
- 定義type，和上面的第二步一樣
- 在相應模組的 actions 裡定義一個方法，如下圖：
這樣子可以獲取非同步請求資料，並儲存在store裡面了。
- 當然呼叫？只需要在元件的方法或者勾子裡面，像下面這樣子呼叫即可。
四、開發規範
1.程式碼規範
結合團隊日常業務需求以及團隊在日常開發過程中總結提煉出的經驗而制定。
旨在增強團隊開發協作、提高程式碼質量和打造開發基石的編碼規範，
以下規範是團隊基本約定的內容，必須嚴格遵循。
規範連結:
參考 騰訊和京東的前端程式碼規範
騰訊的 http://tgideas.qq.com/doc/index.html
京東的 https://guide.aotu.io/index.html
2. 統一編輯器--vsCode 全稱 Visual Studio Code
Visual Studio Code 是微軟推出的跨平臺編輯器。它採用經典的VS的UI佈局，功能強大，擴充套件性很強。
這個編輯器流暢簡潔，自從用了這個編輯器，其他的都不想了，只想靜靜地敲程式碼了。
Microsoft Visual Studio Code 中文手冊 https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/
- 統一格式化程式碼外掛-- Vetur 一個關於vue程式碼格式化
- vue程式碼統一格式化可以減少程式碼風格差異
而且這個外掛配置一下更好用:
"vetur.format.defaultFormatter.js": "vscode-typescript",
不然有些地方會出現換行，程式碼難懂了。像下面這樣：
3. 推薦面板外掛--Boxxy Theme Kit
- 其中的程式碼顏色：Boxy Ocean 是很好看的程式碼風格
用上之後不滿意 ？哼，那筆者就不高興了，筆者不負責！
5.總結
團隊開發要規範！！！
還想學到完整的牛逼技術？去看相關技術的官網！！！
如果你覺得該文章對你有幫助，歡迎到我的 github，star 一下，謝謝。
參考教程： 《JavaScript 語言入門教程