摘要：把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄。是域名的配置只要統(tǒng)一配置一項(xiàng)即可，方便。旨在增強(qiáng)團(tuán)隊(duì)開(kāi)發(fā)協(xié)作提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼規(guī)范，以下規(guī)范是團(tuán)隊(duì)基本約定的內(nèi)容，必須嚴(yán)格遵循。

Vue作為前端三大框架之一，其已經(jīng)悄然成為主流，學(xué)會(huì)用vue相關(guān)技術(shù)來(lái)開(kāi)發(fā)項(xiàng)目會(huì)相當(dāng)輕松。

對(duì)于還沒(méi)學(xué)習(xí)或者還沒(méi)用過(guò)vue的初學(xué)者，基礎(chǔ)知識(shí)這里不作詳解，推薦先去相關(guān)官網(wǎng)，學(xué)習(xí)一下vue相關(guān)的基礎(chǔ)知識(shí)。

a. vue.js 官網(wǎng)?參考：https://cn.vuejs.org/

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

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

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

或者 es6 精簡(jiǎn)篇?https://www.jianshu.com/p/287e0bb867ae

e.?webpack??官網(wǎng)?參考：https://www.webpackjs.com/

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

g.?mint-ui??官網(wǎng)?? 參考：?http://mint-ui.github.io/#!/zh-cn

首先，要開(kāi)發(fā)vue相關(guān)的項(xiàng)目，要會(huì)搭建vue的相關(guān)環(huán)境，要搭建的目錄如下：

1.安裝node.js和npm

2.?webpack

3.?vue-cli腳手架構(gòu)建工具?

具體這里不作詳解，站在前人的肩膀上學(xué)習(xí)即可
安裝node.js和npm
webpack和vue-cli腳手架構(gòu)建工具?

利用腳手架（vue-cli）構(gòu)建一個(gè)vue項(xiàng)目，接下來(lái)學(xué)習(xí)分析下代碼。

具體這里不作詳解，站在前人的肩膀上學(xué)習(xí)即可
教程參考：?https://www.jianshu.com/p/2b661d01eaf8

因?yàn)轫?xiàng)目配置和需要的模塊都已經(jīng)配好了的，所以運(yùn)行只需要：

1.在svn上把 mobile-h5 項(xiàng)目代碼下載下來(lái)。
2.直接進(jìn)入mobile-h5目錄中，即是和 package.json 的文件同級(jí)目錄，或者直接用vsCode編輯器打開(kāi) mobile-h5 項(xiàng)目，在命令終端那里。

安裝依賴，執(zhí)行命令：

npm  install 

或者簡(jiǎn)寫：

npm i

沒(méi)有報(bào)錯(cuò)時(shí)，安裝結(jié)果如圖：

安裝報(bào)錯(cuò)時(shí)，會(huì)出現(xiàn) error 的，或者直接中止了，window系統(tǒng)一般是因?yàn)閚pm 的環(huán)境沒(méi)有配置好。

安裝好模塊后，再執(zhí)行如下命令來(lái)運(yùn)行

npm  run dev

沒(méi)有報(bào)錯(cuò)時(shí)，結(jié)果會(huì)如下圖：

直接打開(kāi)本地鏈接 http://localhost:8080 就可訪問(wèn)了，如下圖：

? ?都寫在 README.md 里面了，具體的也可查看?README.md 的內(nèi)容。

#目錄結(jié)構(gòu)

├── mobile-h5 # 總項(xiàng)目目錄

├── build # webpack 配置文件目錄

├── config # webpack 配置文件引用的目錄

├── kpi # webpack 打包正式生成的目錄

├── src # 主開(kāi)發(fā)文件的目錄

│ ├── assets # 圖片資源

│ ├── components # 組件模塊

| │ ├── app # 組件模塊

| | | ├── add # 本項(xiàng)目指標(biāo)新增的組件的模塊

| | | ├── common # 組件通用的模塊

| | | ├── index # 本項(xiàng)目首頁(yè)組件通用的模塊

| | | ├── index # 本項(xiàng)目套餐組件通用的模塊

│ ├── filters # 過(guò)濾器模塊

│ ├── filters # 過(guò)濾器模塊

│ ├── less # less 的公共樣式模塊

│ ├── libs # 封裝的公共 js 文件模塊

│ ├── mixins # mixins 文件模塊

│ ├── router # 路由模塊

│ ├── store # vuex 的 store 模塊

│ ├── views # 主開(kāi)發(fā)的 vue 模塊

│ ├──

├── static # webpack 打包依賴的目錄

├── index.html # 主頁(yè)面入口，也是生成打包生產(chǎn)環(huán)境代碼要依賴的文件

a. 因?yàn)楸镜亻_(kāi)發(fā)時(shí)，請(qǐng)求接口會(huì)跨域的問(wèn)題，所以要用代理。

具體說(shuō)明?參考 https://my.oschina.net/lixiaoyan/blog/1797724

提示：要在手機(jī)上開(kāi)發(fā)測(cè)試，npm run dev 運(yùn)行的localhost是不行的，要配置nginx來(lái)做代理服務(wù)才行。

b.把打包的目錄修改成生產(chǎn)環(huán)境需要的目錄 kpi。

c. 添加別名，在其他地方引入文件時(shí)，可以省略部分路徑的書寫

a. 開(kāi)發(fā)要根據(jù) 業(yè)務(wù)模塊 來(lái)劃分，進(jìn)而進(jìn)行 文件模塊 的劃分。

比如：

組件components 里面?

components/common是全局公共的組件，

components/app 是mobile-h5的開(kāi)發(fā)組件

components/app/add mobile-h5的指標(biāo)新增的組件

components/app/index 是mobile-h5的首頁(yè)的組件

components/app/setMeal 是mobile-h5的套餐的組件

mixins 里面

mixins/add?是mobile-h5的指標(biāo)新增的?mixins

mixins/common 是mobile-h5的公共的?mixins

modules 里面

modules/add?是mobile-h5的指標(biāo)新增的狀態(tài)數(shù)據(jù)保存

modules/setMeal 是mobile-h5的套餐的狀態(tài)數(shù)據(jù)保存

b. 開(kāi)發(fā)鏈接的書寫。

domain.js 是域名的配置, 只要統(tǒng)一配置一項(xiàng)即可，方便。

urls.js 是請(qǐng)求的鏈接?

比如：?添加收藏? https://baidu.com:8443/emm/favorite/save

因?yàn)橐肓?domain.js 了

所以我們只需要在urls.js里面寫：? save(即別名):? "emm/favorite/save" 即可

c. 引入mock.js ，用來(lái)模擬請(qǐng)求接口數(shù)據(jù)，當(dāng)后端接口還沒(méi)開(kāi)發(fā)出來(lái)時(shí)，就大有用場(chǎng)了。

用法如下：

只要打開(kāi) 總開(kāi)關(guān)，再打開(kāi)你要用mock數(shù)據(jù)的 具體接口的開(kāi)關(guān)，接口就不會(huì)請(qǐng)求后臺(tái)的接口了，只用mock返回的數(shù)據(jù)。

d. css樣式書寫

用法：

比如上圖的，全省的寬 280px ,高 58px , 正常開(kāi)發(fā)下，程序的css上需要寫?

{

width:?280px;

height:?58px;

}

但是我們只需要：

{

width:?280?/?100 rem;

height:?58?/?100 rem;

}

也即是：

{

width:?2.8rem;

height:?0.58rem;

}

而且無(wú)論手機(jī)大小是多少，因?yàn)樵O(shè)計(jì)了 config_width = 750 ，所以滿寬都是 7.5rem。

字體大小等也同理。

注意： 因?yàn)?phone的分辨率高，所以 0.01rem 在 iphone真機(jī)上會(huì)不顯示，在 border設(shè)置的時(shí)候猶為明顯，至少要0.02rem 才行。

是因?yàn)橐肓讼旅孢@個(gè)文件，要了解具體的內(nèi)容，請(qǐng)看 rem_config.js。

還有一個(gè)方法就是非常簡(jiǎn)單的,在 js 里面加入這句代碼即可，寫css時(shí)，也可像上面一樣寫，效果和上面介紹的一樣。

 // 屏幕適配（windowWidth/設(shè)計(jì)稿寬*100） ——*100為了方便計(jì)算。即font-size值是手機(jī)deviceWidth與設(shè)計(jì)稿比值的100倍
    document.getElementsByTagName("html")[0].style.fontSize=window.screen.width/7.5+"px";
    // 如上：通過(guò)查詢屏幕寬度，動(dòng)態(tài)的設(shè)置html的font-size值，設(shè)計(jì)稿大多以750*1334 設(shè)置的，通過(guò)上述換算后，在設(shè)計(jì)圖上一張150*150的圖，在css中對(duì)應(yīng)的rem值則為：1.5*1.5rem

e. 其他

libs里的文件內(nèi)容都是 內(nèi)有乾坤的，開(kāi)發(fā)人員都有必要了解一下，這里就不多介紹了。

vue和react一樣，可以組件化，所以推薦組件化開(kāi)發(fā)的方式。

組件系統(tǒng)是 Vue 的一個(gè)重要概念，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。

參考vue官網(wǎng)，組件化 ：https://cn.vuejs.org/v2/guide/components.html

項(xiàng)目舉例：比如一個(gè)h5的首頁(yè)，可以分為標(biāo)題組件，業(yè)務(wù)實(shí)時(shí)組件，關(guān)鍵指標(biāo)組件，tab切換組件。這幾個(gè)組件的幾乎沒(méi)有聯(lián)系，可以相互獨(dú)立。

當(dāng)然你也可以再劃分成小組件，相同的模塊抽成公共的小組件，這樣子達(dá)到代碼重用的目的更好。比如首頁(yè)里面大模塊的 title 。

本項(xiàng)目vuex的用法 和官方的有點(diǎn)不一樣，所以這里有必要做一下講解。

1. 要用store來(lái)存儲(chǔ)值，都要先定義

比如：新增里面要存儲(chǔ)關(guān)于 日 月 類型的切換：tabActiveType: ""，
要先在store模塊的add里面的initPageState 先定義，不然找不到，為取值會(huì)為undefined。

2. 定義type，至于為什么要大寫？因?yàn)楫?dāng)作常量來(lái)用，當(dāng)然不大寫也可以，不過(guò)本項(xiàng)目要統(tǒng)一成大寫。

3. mutatuons 寫一個(gè)方法來(lái)保存值

4. 調(diào)用保存值,這里的 SAVE_TAB_ACTIVE_TYPE 要與定義在第2中 type 里面的對(duì)應(yīng)，而且 對(duì)象里的 key 要與initPageState里面定義的對(duì)應(yīng)，如 tabActiveType。

5. 當(dāng)然怎么取值？只需要在組件的computed勾子像下面這樣子寫即可。

按照這5步，一個(gè)關(guān)于vuex的取值與偘保存值就ok了！

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

2. 在相應(yīng)模塊的 actions 里定義一個(gè)方法，如下圖：

這樣子可以獲取異步請(qǐng)求數(shù)據(jù)，并保存在store里面了。

結(jié)合團(tuán)隊(duì)日常業(yè)務(wù)需求以及團(tuán)隊(duì)在日常開(kāi)發(fā)過(guò)程中總結(jié)提煉出的經(jīng)驗(yàn)而制定。

旨在增強(qiáng)團(tuán)隊(duì)開(kāi)發(fā)協(xié)作、提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼規(guī)范，

以下規(guī)范是團(tuán)隊(duì)基本約定的內(nèi)容，必須嚴(yán)格遵循。

規(guī)范鏈接:?

參考 騰訊和京東的前端代碼規(guī)范?

騰訊的?http://tgideas.qq.com/doc/index.html

京東的?https://guide.aotu.io/index.html

Visual Studio Code 是微軟推出的跨平臺(tái)編輯器。它采用經(jīng)典的VS的UI布局，功能強(qiáng)大，擴(kuò)展性很強(qiáng)。

這個(gè)編輯器流暢簡(jiǎn)潔，自從用了這個(gè)編輯器，其他的都不想了，只想靜靜地敲代碼了。

Microsoft Visual Studio Code 中文手冊(cè)??https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/

統(tǒng)一格式化代碼插件--?Vetur? 一個(gè)關(guān)于vue代碼格式化?

vue代碼統(tǒng)一格式化可以減少代碼風(fēng)格差異

而且這個(gè)插件配置一下更好用:
`
"vetur.format.defaultFormatter.js":?"vscode-typescript",
`

不然有些地方會(huì)出現(xiàn)換行，代碼難懂了。像下面這樣：

其中的代碼顏色：Boxy Ocean 是很好看的代碼風(fēng)格

用上之后不滿意 ？哼，那本汪就不高興了，本汪不負(fù)責(zé)！

送上參加過(guò)的一次前端交流會(huì)上關(guān)于vue的學(xué)習(xí)和實(shí)踐的pdf文件。要下載才能看哦?。?！
vue項(xiàng)目開(kāi)發(fā)實(shí)踐 [vue-practice.pdf] 和 vue入坑記 [vue-starter.pdf]?https://github.com/biaochenxuying/learning-resource/tree/master/vue??

最后：

團(tuán)隊(duì)開(kāi)發(fā)要規(guī)范?。?！

還想學(xué)到完整的牛逼技術(shù)？去看相關(guān)技術(shù)的官網(wǎng)?。?！

裝逼完畢！多謝！?。”就粲衷撊慴ugger了?。?！

如果你覺(jué)得該文章對(duì)你有幫助，歡迎到我的 github，star 一下，謝謝。

github 地址

你以為本文就這么結(jié)束了 ? 精彩在后面 ?。?！

對(duì) 全棧修煉 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號(hào)

我會(huì)不定期更新有價(jià)值的內(nèi)容，長(zhǎng)期運(yùn)營(yíng)。

關(guān)注公眾號(hào)并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請(qǐng)猛戳： Python、Java、Linux、Go、node、vue、react、javaScript