前言

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)建鄴免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

從今年（2017年）年初起，我們團隊開始引入「Vue.js」開發(fā)移動端的產(chǎn)品。作為團隊的領(lǐng)頭人，我的首要任務(wù)就是設(shè)計 整體的架構(gòu) 。一個良好的架構(gòu)必定是具備豐富的開發(fā)經(jīng)驗后才能搭建出來的。雖然我有多年的前端開發(fā)經(jīng)驗，但就「Vue.js」來說，仍然是個新手。所幸「Vue.js」有一個配套工具「Vue-CLI」，它提供了一些比較成熟的項目模板，很大程度上降低了上手的難度。然而，很多具體的問題還是要自己思考和解決的。

項目劃分

我們公司的H5產(chǎn)品大部分是嵌套在手機客戶端里面的頁面。每個項目的功能都比較獨立，而且規(guī)模不大。這樣一來，既可以讓這些小項目各自為政，也可以把它們集中放到一個大項目中管理。各自的優(yōu)缺點如下：

項目模板考慮到我們團隊剛開始使用「Vue.js」，需要逐步摸索出合適的架構(gòu)。如果做成一個大項目，一旦架構(gòu)要調(diào)整，很可能會傷筋動骨。所以最終的選擇是 劃分成多個小項目 。

雖然劃分成多個小項目了，但是這些小項目也要保持一致的架構(gòu)和公共代碼。說白了，就是要根據(jù)業(yè)務(wù)情況搭建自己的項目模板，所有具體的項目都在這個模板的基礎(chǔ)上開發(fā)。下面就介紹一下我們團隊的項目模板的搭建過程。

初始化

項目模板本身也是一個項目，所以也通過「Vue-CLI」來初始化（項目名為「webapp-public」）：

vue init webpack webapp-public

這里選用的是「webpack」模板，因為功能比較齊全。初始化的過程中要注意：

安裝「Vue-Router」以支持單頁應(yīng)用；

安裝「ESLint」以統(tǒng)一編碼規(guī)范。

SASS

安裝「SASS」的支持比較簡單，先通過命令行安裝相關(guān)依賴：

npm install node-sass --save-devnpm install sass-loader --save-dev

裝好后，只要指定style標簽的「lang」屬性為「scss」，就可以用該語言來編寫樣式代碼了：

REM布局

如今移動端的頁面為了適應(yīng)不同尺寸的手機屏幕，大多都在樣式代碼中使用rem作為尺寸單位。然而，設(shè)計師給的設(shè)計稿還是以px為單位的。這就需要把px轉(zhuǎn)換為rem，這個轉(zhuǎn)換可以在腦子里面轉(zhuǎn)，也可以通過工具去轉(zhuǎn)，比如「PostCSS」的插件「 postcss-px2rem 」。

初始化項目的時候，「PostCSS」就已經(jīng)裝上了，所以直接安裝「postcss-px2rem」即可：

npm install postcss-px2rem --save-dev

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：Vue.js項目模板搭建圖文教程-創(chuàng)新互聯(lián)
標題鏈接：http://weahome.cn/article/dihsjo.html