前言
由于vue相對來說比較平緩的學習過程和新穎的技術思路，使其受到了廣大前后端開發者的青睞，同時其通俗易懂的API和數據綁定的功能也為其攬獲了不少用戶。本文主要講解vue項目的構建與實戰，因此不會太多涉及其API和語法部分，旨在幫助vue的入門級用戶了解從零開始構建vue項目的步驟和方法。
vue項目分類
首先，在構建一個vue項目之前我們需要了解vue項目的分類，這里我主要將其分為兩類：（1）直接引入vue.js文件 （2）使用vue單文件組件
按以上兩類來看，直接引入vue.js文件就像頁面中直接引入jQuery一樣，這樣的項目存在很多缺陷，只能使用一些基礎的API和局限的功能，一般主要用于初級用戶和小型項目。本文主要講解第二種使用vue但文件組件構建的vue項目。
構建方式
構建一個vue項目存在著多種方式，首先我們需要用到相應的構建工具。官方推薦的構建工具主要有webpack和browserify，這里我更推薦大家使用webpack進行構建。同時除了構建工具，我們還需要用到構建方法，比如我們可以使用vue-cli腳手架來自動生成vue項目的基礎目錄文件，當然我們也可以從零開始進行自定義構建。
vue-cli構建
如果你使用vue-cli腳手架來構建vue項目，那么你只需敲擊下面5行命令即可生成一個簡單的vue項目（前提安裝node.js）：
npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev
如此一個基礎的vue項目目錄就自動會展現在你面前，我們可以來看一下其自動生成的基礎文件：
├── build // webpack/node配置文件│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config // 環境配置文件│ ├── dev.env.js│ ├── index.js│ └── prod.env.js├── node_modules // npm包文件├── src // 靜態資源文件│ ├── assets│ │ └── logo.png│ ├── components │ │ └── Hello.vue │ ├── router│ │ └── index.js │ ├── App.vue │ └── main.js├── static├── .babelrc // babel配置文件├── .gitignore // gitignore忽略文件├── .editorconfig // 編碼風格配置文件├── .postcssrc.js // postcss配置文件├── package.json // node包管理文件├── index.html // 首頁模板├── package.json // 包管理文件└── README.md // 描述文件
這樣的構建方式其實并不適用于所有項目，很多文件你的項目可能都不會用到，并且如果你對自動生成的文件一無所知，那么后期維護起來也會非常的吃力。所以這里不推薦新手使用vue-cli構建，而是推薦大家參考vue-cli生成的文件從零開始構建一個vue項目。
自定義構建
相比vue-cli構建，自定義構建就顯得靈活得多，但是它需要你了解構建的步驟和原理，要求也就隨之提高了。自定義構建分為以下幾步：
1. 文件/文件夾創建
按照上方的圖示，我們需要從零開始創建以上文件和文件夾，每一個文件都有其自己的用途。
2. package.json文件
使用下方命令，我們可以快速創建一個package.json文件：
npm init -y
然后修改其scripts配置項，添加打包壓縮命令，并且增加dependencies依賴項，添加項目相應依賴，這里我們主要依賴了vue和vue-router（完整package.json配置文件見最后實例源碼）：
..."scripts": { "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"},"dependencies": { "vue": "^2.3.4", "vue-router": "^2.5.3"}...3. webpack配置文件
其次我們需要創建我們的webpack配置文件，這里和構建其他項目不同的是，vue單文件組件需要使用vue-loader加載器進行加載，同時使用babel-loader進行ES6語法的轉換（完整 webpack 配置文件見最后實例源碼）：
module.exports = {...module: { rules: [ { test: //.vue$/, loader: 'vue-loader', }， { test: //.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ]},...}4. 入口文件
這里我們需要編寫在webpack中配置的入口文件地址的entry.js，主要功能為掛載生成的vue實例app至id為app的DOM節點上：
// entry.jsimport { app } from './app.js'app.$mount('#app')// app.jsimport Vue from 'vue'import App from './App.vue'import router from './router'const app = new Vue({ router, ...App})export { app, router }5. vue組件編寫
然后我們需要編寫一個最簡單的vue組件index.vue，將其放在views文件夾下
<template> <div>hello world!</div></template><script></script><style></style>
同時我們需要編寫最外層父組件App.vue，一般像下面這樣，主要嵌套一層router-view來動態展示不同路由下的內容:
<template> <router-view></router-view></template><script></script><style></style>
6. 路由配置
在編寫完我們vue的單文件組件后，我們需要配置我們的路由文件，以便實現一個單頁應用：
import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由Vue.use(Router) // 注冊路由import Index from '../views/index.vue' // 引入我們剛剛編寫的簡單的組件export default new Router({ mode: 'hash', routes: [ { path: '/', name: 'index', component: Index, }, { path: '*', redirect: '/' }, ]})7. 熱加載
最后我們需要實現一個前端熱加載的功能來實時更新我們修改后的頁面，這里我們需要安裝一個webpack-dev-server的插件，其可以為我們搭建一個本地小型的Node.js Express服務器。
安裝完成后，我們需要在package.json的scripts中配置啟動命令dev：
..."scripts": { "dev": "webpack-dev-server", "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"}...上次配置的build命令用于刪除dist目錄并切換開發環境及打包壓縮代碼，而dev命令用于啟動本地服務器，生成的包只會存在于內存中。
8. 注意事項
完成上方步驟后其實還會存在一個問題，那就是我們的部分ES6代碼無法獲得解析，這里我們還需要添加babel的配置文件.babelrc：
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } }}這里我們使用了stage-2來處理ES6中對象無法使用…解構的問題，同時使用transform-runtime來優化我們的代碼利用率。
項目實例
上方只講述了vue自定義構建的主要步驟和關鍵代碼，詳細代碼實例可以參考：https://github.com/luozhihao/vue-setup-course
結語
本文主要介紹了vue項目構建的兩種方式，vue-cli構建與自定義構建都有其適用的范圍和對象，大家需要針對項目和自身條件的情況進行擇優選擇，同時在自定義構建中也有很多功能配置本文并未提及，感興趣的童鞋可以自己繼續探索。
新聞熱點
疑難解答
