前言

由于vue相對(duì)來(lái)說(shuō)比較平緩的學(xué)習(xí)過(guò)程和新穎的技術(shù)思路，使其受到了廣大前后端開(kāi)發(fā)者的青睞，同時(shí)其通俗易懂的API和數(shù)據(jù)綁定的功能也為其攬獲了不少用戶。本文主要講解vue項(xiàng)目的構(gòu)建與實(shí)戰(zhàn)，因此不會(huì)太多涉及其API和語(yǔ)法部分，旨在幫助vue的入門級(jí)用戶了解從零開(kāi)始構(gòu)建vue項(xiàng)目的步驟和方法。

vue項(xiàng)目分類

首先，在構(gòu)建一個(gè)vue項(xiàng)目之前我們需要了解vue項(xiàng)目的分類，這里我主要將其分為兩類：（1）直接引入vue.js文件 （2）使用vue單文件組件

按以上兩類來(lái)看，直接引入vue.js文件就像頁(yè)面中直接引入jQuery一樣，這樣的項(xiàng)目存在很多缺陷，只能使用一些基礎(chǔ)的API和局限的功能，一般主要用于初級(jí)用戶和小型項(xiàng)目。本文主要講解第二種使用vue但文件組件構(gòu)建的vue項(xiàng)目。

構(gòu)建方式

構(gòu)建一個(gè)vue項(xiàng)目存在著多種方式，首先我們需要用到相應(yīng)的構(gòu)建工具。官方推薦的構(gòu)建工具主要有webpack和browserify，這里我更推薦大家使用webpack進(jìn)行構(gòu)建。同時(shí)除了構(gòu)建工具，我們還需要用到構(gòu)建方法，比如我們可以使用vue-cli腳手架來(lái)自動(dòng)生成vue項(xiàng)目的基礎(chǔ)目錄文件，當(dāng)然我們也可以從零開(kāi)始進(jìn)行自定義構(gòu)建。

vue-cli構(gòu)建

如果你使用vue-cli腳手架來(lái)構(gòu)建vue項(xiàng)目，那么你只需敲擊下面5行命令即可生成一個(gè)簡(jiǎn)單的vue項(xiàng)目（前提安裝node.js）：

npm install -g vue-cli

vue init webpack my-project

cd my-project

npm install

npm run dev

如此一個(gè)基礎(chǔ)的vue項(xiàng)目目錄就自動(dòng)會(huì)展現(xiàn)在你面前，我們可以來(lái)看一下其自動(dòng)生成的基礎(chǔ)文件：

├── 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 // 環(huán)境配置文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── node_modules // npm包文件
├── src // 靜態(tài)資源文件
│ ├── assets
│ │ └── logo.png
│ ├── components 
│ │ └── Hello.vue 
│ ├── router
│ │ └── index.js 
│ ├── App.vue 
│ └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 編碼風(fēng)格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首頁(yè)模板
├── package.json // 包管理文件
└── README.md // 描述文件

這樣的構(gòu)建方式其實(shí)并不適用于所有項(xiàng)目，很多文件你的項(xiàng)目可能都不會(huì)用到，并且如果你對(duì)自動(dòng)生成的文件一無(wú)所知，那么后期維護(hù)起來(lái)也會(huì)非常的吃力。所以這里不推薦新手使用vue-cli構(gòu)建，而是推薦大家參考vue-cli生成的文件從零開(kāi)始構(gòu)建一個(gè)vue項(xiàng)目。

自定義構(gòu)建

相比vue-cli構(gòu)建，自定義構(gòu)建就顯得靈活得多，但是它需要你了解構(gòu)建的步驟和原理，要求也就隨之提高了。自定義構(gòu)建分為以下幾步：

1. 文件/文件夾創(chuàng)建
2. package.json文件創(chuàng)建
3. webpack配置文件創(chuàng)建
4. 入口文件創(chuàng)建
5. vue組件編寫(xiě)
6. 路由配置

1. 文件/文件夾創(chuàng)建

按照上方的圖示，我們需要從零開(kāi)始創(chuàng)建以上文件和文件夾，每一個(gè)文件都有其自己的用途。

2. package.json文件

使用下方命令，我們可以快速創(chuàng)建一個(gè)package.json文件：

npm init -y

然后修改其scripts配置項(xiàng)，添加打包壓縮命令，并且增加dependencies依賴項(xiàng)，添加項(xiàng)目相應(yīng)依賴，這里我們主要依賴了vue和vue-router（完整package.json配置文件見(jiàn)最后實(shí)例源碼）：

...

"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配置文件

其次我們需要?jiǎng)?chuàng)建我們的webpack配置文件，這里和構(gòu)建其他項(xiàng)目不同的是，vue單文件組件需要使用vue-loader加載器進(jìn)行加載，同時(shí)使用babel-loader進(jìn)行ES6語(yǔ)法的轉(zhuǎn)換（完整 webpack 配置文件見(jiàn)最后實(shí)例源碼）：

module.exports = {
...

module: {
 rules: [
  {
   test: /\.vue$/,
   loader: 'vue-loader',
  }，
  {
   test: /\.js$/,
   loader: 'babel-loader',
   exclude: /node_modules/
  },
 ]
},

...
}

4. 入口文件

這里我們需要編寫(xiě)在webpack中配置的入口文件地址的entry.js，主要功能為掛載生成的vue實(shí)例app至id為app的DOM節(jié)點(diǎn)上：

// 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組件編寫(xiě)

然后我們需要編寫(xiě)一個(gè)最簡(jiǎn)單的vue組件index.vue，將其放在views文件夾下

<template>
 <div>hello world!</div>
</template>

<script></script>

<style></style>

同時(shí)我們需要編寫(xiě)最外層父組件App.vue，一般像下面這樣，主要嵌套一層router-view來(lái)動(dòng)態(tài)展示不同路由下的內(nèi)容:

<template>
 <router-view></router-view>
</template>

<script></script>

<style></style>

6. 路由配置

在編寫(xiě)完我們vue的單文件組件后，我們需要配置我們的路由文件，以便實(shí)現(xiàn)一個(gè)單頁(yè)應(yīng)用：

import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入路由

Vue.use(Router) // 注冊(cè)路由

import Index from '../views/index.vue' // 引入我們剛剛編寫(xiě)的簡(jiǎn)單的組件

export default new Router({
 mode: 'hash',
 routes: [
  { 
   path: '/', 
   name: 'index', 
   component: Index,
  },
  { path: '*', redirect: '/' },
 ]
})

7. 熱加載

最后我們需要實(shí)現(xiàn)一個(gè)前端熱加載的功能來(lái)實(shí)時(shí)更新我們修改后的頁(yè)面，這里我們需要安裝一個(gè)webpack-dev-server的插件，其可以為我們搭建一個(gè)本地小型的Node.js Express服務(wù)器。

安裝完成后，我們需要在package.json的scripts中配置啟動(dòng)命令dev：

...

"scripts": {
 "dev": "webpack-dev-server",
 "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
}

...

上次配置的build命令用于刪除dist目錄并切換開(kāi)發(fā)環(huán)境及打包壓縮代碼，而dev命令用于啟動(dòng)本地服務(wù)器，生成的包只會(huì)存在于內(nèi)存中。

8. 注意事項(xiàng)

完成上方步驟后其實(shí)還會(huì)存在一個(gè)問(wèn)題，那就是我們的部分ES6代碼無(wú)法獲得解析，這里我們還需要添加babel的配置文件.babelrc：

{
 "presets": [
 ["env", { "modules": false }],
 "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "comments": false,
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": [ "istanbul" ]
 }
 }
}

這里我們使用了stage-2來(lái)處理ES6中對(duì)象無(wú)法使用…解構(gòu)的問(wèn)題，同時(shí)使用transform-runtime來(lái)優(yōu)化我們的代碼利用率。

項(xiàng)目實(shí)例

上方只講述了vue自定義構(gòu)建的主要步驟和關(guān)鍵代碼，詳細(xì)代碼實(shí)例可以參考：https://github.com/luozhihao/vue-setup-course

結(jié)語(yǔ)

本文主要介紹了vue項(xiàng)目構(gòu)建的兩種方式，vue-cli構(gòu)建與自定義構(gòu)建都有其適用的范圍和對(duì)象，大家需要針對(duì)項(xiàng)目和自身?xiàng)l件的情況進(jìn)行擇優(yōu)選擇，同時(shí)在自定義構(gòu)建中也有很多功能配置本文并未提及，感興趣的童鞋可以自己繼續(xù)探索。

最新評(píng)論