基於vue+mint-ui的mobile-h5的項目說明

Vue做爲前端三大框架之一，其已經悄然成爲主流，學會用vue相關技術來開發項目會至關輕鬆。

對於還沒學習或者還沒用過vue的初學者，基礎知識這裏不做詳解，推薦先去相關官網，學習一下vue相關的基礎知識。

a. vue.js 官網 參考：https://cn.vuejs.org/

b. Vue Router  官網 參考：https://router.vuejs.org/zh/[](https://router.vuejs.org/zh/)

c. Vuex  官網 參考：https://vuex.vuejs.org/zh/[](https://vuex.vuejs.org/zh/)

d. ECMAScript 6 入門 參考：http://es6.ruanyifeng.com/  

或者 es6 精簡篇 https://www.jianshu.com/p/287e0bb867ae

e. webpack  官網 參考：https://www.webpackjs.com/

f. less  官網 參考：https://less.bootcss.com/[](https://less.bootcss.com/)

g. mint-ui  官網   參考： http://mint-ui.github.io/#!/zh-cn

一.搭建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 項目，在命令終端那裏。

1. 安裝依賴，執行命令：

npm  install

或者簡寫：

npm i

沒有報錯時，安裝結果如圖：

安裝報錯時，會出現 error 的，或者直接停止了，window系統通常是由於npm 的環境沒有配置好。

1. 安裝好模塊後，再執行以下命令來運行

npm  run dev

沒有報錯時，結果會以下圖：

1. 直接打開本地連接 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 才行。

1. 是由於引入了下面這個文件，要了解具體的內容，請看 rem_config.js。

1. 還有一個方法就是很是簡單的,在 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.5rem

e. 其餘

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。

2. 定義type，至於爲何要大寫？由於看成常量來用，固然不大寫也能夠，不過本項目要統一成大寫。

3. mutatuons 寫一個方法來保存值

4. 調用保存值,這裏的 SAVE_TAB_ACTIVE_TYPE 要與定義在第2中 type 裏面的對應，並且 對象裏的 key 要與initPageState裏面定義的對應，如 tabActiveType。

5. 固然怎麼取值？只須要在組件的computed勾子像下面這樣子寫便可。

按照這5步，一個關於vuex的取值與偘保存值就ok了！

2.那怎麼異步action呢？

1. 定義type，和上面的第二步同樣

2. 在相應模塊的 actions 裏定義一個方法，以下圖：

這樣子能夠獲取異步請求數據，並保存在store裏面了。

3. 固然調用？只須要在組件的方法或者勾子裏面，像下面這樣子調用便可。

4、開發規範

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 是很好看的代碼風格

用上以後不滿意 ？哼，那本汪就不高興了，本汪不負責！

五.總結

送上參加過的一次前端交流會上關於vue的學習和實踐的pdf文件。要下載才能看哦！！！
vue項目開發實踐 [vue-practice.pdf] 和 vue入坑記 [vue-starter.pdf] https://github.com/biaochenxuying/learning-resource/tree/master/vue  

最後：

團隊開發要規範！！！

還想學到完整的牛逼技術？去看相關技術的官網！！！

裝逼完畢！多謝！！！本汪又該去寫bugger了！！！

若是你以爲該文章對你有幫助，歡迎到個人 github，star 一下，謝謝。

github 地址

你覺得本文就這麼結束了 ? 精彩在後面 ！！！