Vue.js項目模板搭建圖文教程

前言

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

項目劃分

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

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

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

初始化

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

vue init webpack webapp-public

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

安裝「Vue-Router」以支持單頁應用；

安裝「ESLint」以統一編碼規范。

SASS

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

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

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

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

REM布局

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

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

npm install postcss-px2rem --save-dev

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

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

「px值/remUnit」即為轉換出來的rem值，可以根據自身需要修改「remUnit」的值。

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

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

Vuex

在單頁應用開發中，負責管理狀態的「Vuex」也是必備的。安裝也非常簡單：

npm install vuex --save

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

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

這是因為瀏覽器不支持「Promise」，這時候就需要一個「polyfill」。我們可以直接用「babel-polyfill」：

npm install babel-polyfill --save

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

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

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

"plugins": ["transform-runtime"]

然后刪除依賴即可：

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

訪問路徑

每個小項目真正在服務器（不管是測試、預發布還是生產環境的服務器）上運行的時候，是通過一級子目錄去區分的。

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

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

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

設置基路徑后，跟路由相關的所有路徑都是相對基路徑，而不是根目錄。

然后是開發服務器的 資源發布路徑 （/config/index.js）：

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

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

require('connect-history-api-fallback')({ 
 // 默認為"/index.html"，因為資源發布路徑改了，所以這里也要對應上
 index: '/project-a/index.html'
 })
// 運行項目后默認打開的頁面地址
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')

順帶一提，上面的這堆參數完全是用源代碼調試的結果，官網文檔并沒有詳細說明。

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

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

然后把剛才涉及添加一級子目錄的代碼全部改成調用該函數來實現：

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

公共代碼

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

通用性較強的庫 ：包括團隊成員編寫的一些通用庫、無法通過npm安裝的通用庫等，跟業務無關；

業務邏輯庫 ：跟業務有關，但是跟表現層無關的公共代碼；

業務組件庫 ：表現層的組件。

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

在每一種公共代碼的文件夾內，具體某一個庫或者組件的目錄結構如下：

/src/public/components/img-box

img-box.vue

1.1

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

構建

「webpack」這個項目模板已經配置好構建的邏輯。通過一個命令就可以執行構建：

npm run build

根據默認配置，代碼會被發布到項目根目錄下的「dist」文件夾內。然而，這樣簡單粗暴的發布方式并不能滿足實際需求：

資源文件（圖片、CSS、JS等）要發布到 CDN服務器 ；

HTML中要通過完整的URL引用資源文件（因為資源文件在CDN的域上）；

不用的環境（測試、預發布、生產）使用不同的域訪問。

先解決區分環境的問題，我們在構建命令中新增一個參數以表示環境：

npm run build <test|pre|prod>

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

文件內容表示的分別是不同環境下的HTML文件發布路徑、資源發布路徑以及資源訪問路徑。

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

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

然后修改構建部分的代碼：

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

此時運行構建命令，就可以把項目發布到「conf.json」指定的路徑中。

小結

至此，項目模板搭建完畢。其實最重要的一點就是 可配置化 ，否則，開發具體項目的人初始化一個項目還要改十幾個地方，效率就很低了。

項目模板的使用

項目模板已經搭建好了，但是怎么用呢？有兩種常用場景：

初始化新項目 ：克隆或拉取項目模板項目，復制該項目的所有文件（除了「.git」文件夾）到新項目的文件夾，修改配置后進行后續開發。

更新公共代碼 ：克隆或拉取項目模板項目，復制要更新的代碼到目標項目的對應路徑。

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

初始化項目的命令為：

webapp init [projectPath]

例如：

webapp init test

更新特定文件的命令為：

webapp update <fileGlobs> [projectPath]

例如：

webapp update /src/public/** test

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

以上這篇Vue.js項目模板搭建圖文教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。