vue專案構建與實戰

勞卜發表於2017-06-27
Vue

關於

前言

由於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自定義構建的主要步驟和關鍵程式碼，詳細程式碼例項可以參考：github.com/luozhihao/v…

結語

本文主要介紹了vue專案構建的兩種方式，vue-cli構建與自定義構建都有其適用的範圍和物件，大家需要針對專案和自身條件的情況進行擇優選擇，同時在自定義構建中也有很多功能配置本文並未提及，感興趣的童鞋可以自己繼續探索。

如果覺得本文對你有幫助，可以關注我的微信公眾號，來這裡聊點關於前端的事情。

相關文章