本文主要為大家帶來一篇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」这个项目模板已经配置好构建的逻辑。通过一个命令就可以执行构建：
根据默认配置，代码会被发布到项目根目录下的「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 update <fileGlobs> [projectPath]
登入後複製
例如：
webapp update /src/public/** test
登入後複製
这个工具并没有改变操作方式，只是由人工操作变成程序代劳。
相关推荐：
vue.js项目打包上线的图文讲解
以上是Vue.js專案範本如何大家圖文分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
