详解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构建，自定义构建就显得灵活得多，但是它需要你了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步：

1. 文件/文件夹创建
2. package.json文件创建
3. webpack配置文件创建
4. 入口文件创建
5. vue组件编写
6. 路由配置

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构建与自定义构建都有其适用的范围和对象，大家需要针对项目和自身条件的情况进行择优选择，同时在自定义构建中也有很多功能配置本文并未提及，感兴趣的童鞋可以自己继续探索。

# vue项目构建  # 构建vue项目  # vue.js  # 构建项目  # Vue.js实战之Vuex的入门教程  # vue项目实战总结篇  # Vue实战之vue登录验证的实现代码  # Vue.js实战之组件之间的数据传递  # Vue2.0如何发布项目实战  # 优雅的处理vue项目异常实战记录  # vue-router项目实战总结篇  # vue实战中的一些实用小魔法汇总  # 配置文件  # 自定义  # 从零开始  # 加载  # 都有  # 自动生成  # 将其  # 我们可以  # 构建一个  # 还需要  # 两类  # 自己的  # 的是  # 如果你  # 放在  # 太多  # 也会  # 就像  # 也就  # 有很多 

相关文章： 如何快速重置建站主机并恢复默认配置？  建站VPS能否同时实现高效与安全翻墙？  如何制作算命网站,怎么注册算命网站？  制作旅游网站html,怎样注册旅游网站？  建站之星安装后如何自定义网站颜色与字体？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  代购小票制作网站有哪些,购物小票的简要说明？  如何选择适配移动端的WAP自助建站平台？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  代刷网站制作软件,别人代刷火车票靠谱吗？  如何使用Golang安装API文档生成工具_快速生成接口文档  济南专业网站制作公司,济南信息工程学校怎么样？  网站微信制作软件,如何制作微信链接？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  音响网站制作视频教程,隆霸音响官方网站？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  建站之星收费标准详解：套餐费用及年费价格表一览  网站制作公司排行榜,抖音怎样做个人官方网站  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  智能起名网站制作软件有哪些,制作logo的软件？  如何用搬瓦工VPS快速搭建个人网站？  如何快速搭建高效香港服务器网站？  如何生成腾讯云建站专用兑换码？  大连网站设计制作招聘信息,大连投诉网站有哪些？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  教学网站制作软件,学习*后期制作的网站有哪些？  如何零基础在云服务器搭建WordPress站点？  学校为何禁止电信移动建设网站？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  成都网站制作报价公司,成都工业用气开户费用？  c# 在ASP.NET Core中管理和取消后台任务  如何快速搭建高效可靠的建站解决方案？  网站网页制作专业公司,怎样制作自己的网页？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊？  建站org新手必看：2024最新搭建流程与模板选择技巧  建站之星3.0如何解决常见操作问题？  制作网站怎么制作,*游戏网站怎么搭建？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  如何通过万网虚拟主机快速搭建网站？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  微信小程序 五星评分(包括半颗星评分)实例代码  建站主机选哪种环境更利于SEO优化？  如何用PHP快速搭建高效网站？分步指南