Vue.js項(xiàng)目模板搭建圖文教程

前言

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，微信小程序開發(fā)，10年建站對邊坡防護(hù)網(wǎng)等多個方面，擁有多年的網(wǎng)站營銷經(jīng)驗(yàn)。

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

項(xiàng)目劃分

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

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

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

初始化

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

vue init webpack webapp-public

這里選用的是「webpack」模板，因?yàn)楣δ鼙容^齊全。初始化的過程中要注意：

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

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

SASS

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

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

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

<style lang="scss" scoped></style><style src="style.scss" lang="scss"></style>

REM布局

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

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

npm install postcss-px2rem --save-dev

裝好后還要修改項(xiàng)目根目錄下的「.postcssrc.js」，增加「postcss-px2rem」的配置：

"plugins": { 
 "autoprefixer": {}, 
 "postcss-px2rem": { "remUnit": 100 }
}

「px值/remUnit」即為轉(zhuǎn)換出來的rem值，可以根據(jù)自身需要修改「remUnit」的值。

然而，有些特殊的px值是不需要轉(zhuǎn)換成rem值的，這時候可以通過特殊注釋禁止「postcss-px2rem」去處理這個值。例如：

/* 不同dpr下的細(xì)線 */
.g-dpr-1 .g-border-1px { 
 border-width: 1px !important; /*no*/
 }
 .g-dpr-2 .g-border-1px { 
 border-width: 0.5px !important; /*no*/
 }

Vuex

在單頁應(yīng)用開發(fā)中，負(fù)責(zé)管理狀態(tài)的「Vuex」也是必備的。安裝也非常簡單：

npm install vuex --save

然而，真正使用的時候，在一些 低版本系統(tǒng)的瀏覽器 中，可能會出現(xiàn)這樣的異常：

Error: [vuex] vuex requires a Promise polyfill in this browser.

這是因?yàn)闉g覽器不支持「Promise」，這時候就需要一個「polyfill」。我們可以直接用「babel-polyfill」：

npm install babel-polyfill --save

「babel-polyfill」會在 全局作用域 添加ES6新增的對象和方法，項(xiàng)目中的其他代碼并不需要顯式地引入（import或者require）它，這就意味著「Webpack」不會把它識別為項(xiàng)目的依賴。所以還要修改「/build/webpack.base.conf.js」，在打包入口處增加「babel-polyfill」：

entry: { 
 app: ['babel-polyfill', './src/main.js']
}

另外要提一下的是，使用「Vue-CLI」初始化項(xiàng)目的時候默認(rèn)安裝了「 babel-plugin-transform-runtime 」，而它的作用跟「babel-polyfill」是重復(fù)的，所以可以移除前者。修改根目錄下的「.babelrc」，移除這一行：

"plugins": ["transform-runtime"]

然后刪除依賴即可：

npm uninstall babel-plugin-transform-runtime --save-dev

訪問路徑

每個小項(xiàng)目真正在服務(wù)器（不管是測試、預(yù)發(fā)布還是生產(chǎn)環(huán)境的服務(wù)器）上運(yùn)行的時候，是通過一級子目錄去區(qū)分的。

這就意味著，項(xiàng)目中的所有路徑都要加上一層目錄（比如原訪問路徑為「http://localhost:8080/home」，現(xiàn)在就得改成「http://localhost:8080/project-a/home」）。千萬別以為這是很簡單的事情，實(shí)際上要改的地方是很多的。

首先要改的是「Vue-Router」的 基路徑 配置：

new Router({ 
 base: '/project-a/', // 基路徑
 mode: 'history', 
 routes: [
 { path: '/', component: Home }
]
});

設(shè)置基路徑后，跟路由相關(guān)的所有路徑都是相對基路徑，而不是根目錄。

然后是開發(fā)服務(wù)器的 資源發(fā)布路徑 （/config/index.js）：

dev: { assetsPublicPath: '/project-a/' }

對應(yīng)地還要修改「/build/dev-server.js」的兩處地方，不然訪問的時候就會404：

require('connect-history-api-fallback')({ 
 // 默認(rèn)為"/index.html"，因?yàn)橘Y源發(fā)布路徑改了，所以這里也要對應(yīng)上
 index: '/project-a/index.html'
 })
// 運(yùn)行項(xiàng)目后默認(rèn)打開的頁面地址
var uri = 'http://localhost:' + port + '/project-a/'

最后還要修改 Webpack熱更新的檢測路徑 。先修改「/build/dev-server.js」：

require('webpack-hot-middleware')(compiler, { 
 log: false, 
 path: '/project-a/__webpack_hmr'
 })

然后修改「/build/dev-client.js」：

require('webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true&noInfo=true&reload=true')

順帶一提，上面的這堆參數(shù)完全是用源代碼調(diào)試的結(jié)果，官網(wǎng)文檔并沒有詳細(xì)說明。

全部改完之后可以發(fā)現(xiàn)，跟目錄有關(guān)的代碼有5處，具體項(xiàng)目使用的時候豈不是要改5次？非常麻煩。這種情況下，把這部分邏輯寫成一個公共函數(shù)去調(diào)用是最好的選擇。新建文件「 /src/add-dirname.js 」：

const DIR_NAME = '/project-a/';
module.exports = function(path) { 
 return (DIR_NAME + path).replace(/\/{2,}/g, '/');
};

然后把剛才涉及添加一級子目錄的代碼全部改成調(diào)用該函數(shù)來實(shí)現(xiàn)：

這樣一來，如果要修改一級子目錄，只需要修改常量「DIR_NAME」的值就可以了。

公共代碼

我們的公共代碼分為三種：

通用性較強(qiáng)的庫 ：包括團(tuán)隊(duì)成員編寫的一些通用庫、無法通過npm安裝的通用庫等，跟業(yè)務(wù)無關(guān)；

業(yè)務(wù)邏輯庫 ：跟業(yè)務(wù)有關(guān)，但是跟表現(xiàn)層無關(guān)的公共代碼；

業(yè)務(wù)組件庫 ：表現(xiàn)層的組件。

它們都位于「/src/public」：

在每一種公共代碼的文件夾內(nèi)，具體某一個庫或者組件的目錄結(jié)構(gòu)如下：

/src/public/components/img-box

img-box.vue

1.1

這里要特別提一下的是 版本號 這一層文件夾。如果對庫或者組件的修改會造成以前的調(diào)用代碼不兼容，就不應(yīng)該修改原文件，而是新建一個版本號文件夾，把新的代碼以及其余的資源文件都放到這個新文件夾中。這樣做的好處是，具體的項(xiàng)目要更新公共代碼時，直接把項(xiàng)目模板的「/src/public」覆蓋過去就行，不用擔(dān)心不兼容。

構(gòu)建

「webpack」這個項(xiàng)目模板已經(jīng)配置好構(gòu)建的邏輯。通過一個命令就可以執(zhí)行構(gòu)建：

npm run build

根據(jù)默認(rèn)配置，代碼會被發(fā)布到項(xiàng)目根目錄下的「dist」文件夾內(nèi)。然而，這樣簡單粗暴的發(fā)布方式并不能滿足實(shí)際需求：

資源文件（圖片、CSS、JS等）要發(fā)布到 cdn服務(wù)器 ；

HTML中要通過完整的URL引用資源文件（因?yàn)橘Y源文件在CDN的域上）；

不用的環(huán)境（測試、預(yù)發(fā)布、生產(chǎn)）使用不同的域訪問。

先解決區(qū)分環(huán)境的問題，我們在構(gòu)建命令中新增一個參數(shù)以表示環(huán)境：

npm run build <test|pre|prod>

然后在根目錄下新建一個配置文件「conf.json」（簡單起見，只寫了兩種環(huán)境的配置）：

文件內(nèi)容表示的分別是不同環(huán)境下的HTML文件發(fā)布路徑、資源發(fā)布路徑以及資源訪問路徑。

接下來就要把這些配置接入到「Webpack」的打包配置中。修改「/config/index.js」，先在開頭加上：

var env = process.argv[2]; // 環(huán)境參數(shù)（從0開始的第二個）
var conf = require('../conf');
// 找出對應(yīng)環(huán)境的配置conf.indexRoot = conf.indexRoots[env];
conf.assetsRoot = conf.assetsRoots[env];
conf.assetsPublicPath = conf.assetsPublicPaths[env];

然后修改構(gòu)建部分的代碼：

build: { 
 index: path.resolve(__dirname, conf.indexRoot + 'index.html'),
 assetsRoot: path.resolve(__dirname, conf.assetsRoot),
 assetsPublicPath: conf.assetsPublicPath
}

此時運(yùn)行構(gòu)建命令，就可以把項(xiàng)目發(fā)布到「conf.json」指定的路徑中。

小結(jié)

至此，項(xiàng)目模板搭建完畢。其實(shí)最重要的一點(diǎn)就是 可配置化 ，否則，開發(fā)具體項(xiàng)目的人初始化一個項(xiàng)目還要改十幾個地方，效率就很低了。

項(xiàng)目模板的使用

項(xiàng)目模板已經(jīng)搭建好了，但是怎么用呢？有兩種常用場景：

初始化新項(xiàng)目 ：克隆或拉取項(xiàng)目模板項(xiàng)目，復(fù)制該項(xiàng)目的所有文件（除了「.git」文件夾）到新項(xiàng)目的文件夾，修改配置后進(jìn)行后續(xù)開發(fā)。

更新公共代碼 ：克隆或拉取項(xiàng)目模板項(xiàng)目，復(fù)制要更新的代碼到目標(biāo)項(xiàng)目的對應(yīng)路徑。

兩種場景都離不開「克隆或拉取」、「復(fù)制和粘貼」，這種做法一是麻煩，二是逼格太低。所以后來我用Node.js寫了一個命令行工具「webapp-cli」來完成這兩項(xiàng)工作。

初始化項(xiàng)目的命令為：

webapp init [projectPath]

例如：

webapp init test

更新特定文件的命令為：

webapp update <fileGlobs> [projectPath]

例如：

webapp update /src/public/** test

這個工具并沒有改變操作方式，只是由人工操作變成程序代勞。

以上這篇Vue.js項(xiàng)目模板搭建圖文教程就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：Vue.js項(xiàng)目模板搭建圖文教程
文章鏈接：http://muchs.cn/article10/gdecdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、建站公司、商城網(wǎng)站、自適應(yīng)網(wǎng)站、外貿(mào)建站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)