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 自定义构建的主要步骤和关键代码，详细代码实例可以参考：https://github.com/luozhihao/vue-setup-course
结语
本文主要介绍了 vue 项目构建的两种方式，vue-cli 构建与自定义构建都有其适用的范围和对象，大家需要针对项目和自身条件的情况进行择优选择，同时在自定义构建中也有很多功能配置本文并未提及，感兴趣的童鞋可以自己继续探索。