vue項目構建與實戰

關於

• 微信公衆號：前端呼啦圈（Love-FED）
• 個人博客：勞卜的博客
• 知乎專欄：前端呼啦圈

前言

因爲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-cli

vue init webpack my-project

cd my-project

npm install

npm 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構建，自定義構建就顯得靈活得多，可是它須要你瞭解構建的步驟和原理，要求也就隨之提升了。自定義構建分爲如下幾步：

• 文件/文件夾建立
• package.json文件建立
• webpack配置文件建立
• 入口文件建立
• vue組件編寫
• 路由配置

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.js
import { app } from './app.js'

app.$mount('#app')

// app.js
import 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' // 引入vue
import 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構建與自定義構建都有其適用的範圍和對象，你們須要針對項目和自身條件的狀況進行擇優選擇，同時在自定義構建中也有不少功能配置本文並未說起，感興趣的童鞋能夠本身繼續探索。

​