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构建与自定义构建都有其适用的范围和对象，你们须要针对项目和自身条件的状况进行择优选择，同时在自定义构建中也有不少功能配置本文并未说起，感兴趣的童鞋能够本身继续探索。

​