目录
5 前端工程化的使用
前面介绍的传统的使用Vue.js的方式，其实我们就把各个js、css文件直接引入到html界面就可以进行使用了非常简单快捷。但是如果网站的功能很多，页面很多那我们就需要建立很多html、js、css 文件，时间一长这些文件就会出现堆积和混乱，甚至会引起冲突导致功能出现问题。
能不能像服务端一样有一个Maven这样的工具可以管理我们的组件、构建并且编译我们的项目那？答案是肯定的，那就是npm + webpack。
Npm为我们提供的能力就是查找、安装、管理我们的js工具，并且解决版本依赖的问题。
Webpack则为我们提供静态模块 .vue、.less 等文件的编译打包的能力，正常情况下Webpack会将我们的项目打包成一个SPA（A Single Page Application）页面，即一个 html、一个js、一个css 文件，另外可能还会有css需要的一些资源文件。
5.1 基础项目搭建
那么如何将这样的开发环境构建到我们的项目中那？
第1步 安装Node.js
Node.js 官网：https://nodejs.org/zh-cn/
如下图，下载最新的“长期支持版”即可。
安装界面会提示我们即将安装的node 和 npm 的版本
验证安装是否成功：
$ node -v
v10.14.2
$ npm -v
6.4.1
可以正常输出版本号，说明我们的安装就成功了，安装完成后，我们就可以通过npm来安装我们需要的JS组件和框架了。
第2步 安装国内的npm库
同Maven一样npm默认是走国外的库去查找和下载文件的，在国内使用的话会非常慢。那么我们就要安装一个快速稳定的国内的库：
$ npm i -g cnpm --registry=https://registry.npm.taobao.org
第3步 安装Vue-Cli脚手架
Vue-Cli脚手架的功能就是他能够帮助我们自动建立Vue的基本开发项目，类似于之前提到Spring Boot 的项目构建插件，不同的是这个是基于命令行的。
安装：
$ cnpm i -g vue-cli
这里进行全局安装，验证安装是否成功：
$ vue -V
2.9.6
正常输出版本号，说明我们已安装成功。
第4步 构建前端项目基础框架
首先我们在Web项目中建立一个用于存储前端工程源文件，同Maven的Src平级的目录frontend,如下图：
在命令行工具中，进入到项目根目录用Vue构建一个Webpack的脚手架项目：
ash-3.2# cd ~/web-pro
bash-3.2# vue init webpack frontend
? Project name frontend (工程目录名，默认之前命令中的项目名，直接回车即可)
? Project description A Vue.js project （项目描述，可以添加项目概要描述，不添加直接回车即可）
? Author robot（作者，一般默认为当前计算机名，直接回车即可）
? Vue build standalone （选第一项）
? Install vue-router? Yes （y，前端路由会使用到）
? Use ESLint to lint your code? No（代码检查，选n idea足以胜任这个任务）
? Set up unit tests No（单元测试，选 n）
? Setup e2e tests with Nightwatch? No （也是测试的，选n）
? Should we run `npm install` for you after the project has been created? (recommended) no (是否运行安装命令，选稍后手工安装)
Mac OS默认情况下运行构建命令，会出现没有权限的问题，我们通过 sudo -s 命令进入bash模式即可正常进行操作。
初始化项目，上面最后一项我们之所以选择手动安装，就是默认会通过npm安装，为了提高安装速度我们通过cnpm命令进行安装：
bash-3.2# cnpm install
✔ Installed 37 packages
✔ All packages installed
第5步 安装前端项目依赖
我们安装演示需要的最基本的依赖，项目中需要按照实际情况安装相关的工具依赖，比如用于处理时间的moment.js 。
bash-3.2# cnpm install axios -S
✔ Installed 1 packages
✔ Linked 2 latest versions
✔ Run 0 scripts
✔ All packages installed
bash-3.2# cnpm install iview -S
✔ Installed 1 packages
✔ Linked 11 latest versions
✔ Run 0 scripts
✔ All packages installed
-S 参数会将组建自动配置到package.json中，如果不加这个参数使用是，需要手动将相关依赖的配置添加到dependencies配置中。
为目录批量授权：
在bash模式创建的文件，默认情况iedea在当前用户下是没有修改权限的我们需要将frontend目录中所有文件的权限都授权给当前用户，idea才能进行正常的编辑操作；
点击frontend项目目录的右键，选择“显示简介”，在最下方权限设置框中将权限设置好后，选择“应用到包含的项目中”即可为所有文件批量授权了。后续idea自己建立的文件不会存在这种问题。
或者采用命令行的方式，回退到上级目录运行如下命令即可：
bash-3.2# chmod -R 777 frontend/
这种方式比较彻底，采用菜单的方式有的时候会有部分文件或文件夹授权无效。
第6步 在idea中进行相关配置
要进行正常的开发idea还需要进行相关的配置，首先我们要安装两个插件vue和npm插件，在idea的插件中心中直接搜索这两个关键词进行安装即可，此处就不赘述了；vue插件的作用是帮我们进行日常文件建立、编辑、提示、代码检查等工作；npm插件的作用是，帮助我们进行一键构建；
npm插件配置：
进入run/debug 配置中心，点击+，选择npm；
pack json: 选择frontend目前中package.json文件的位置
command: 选择run
scripts：选择build
配置完成后，当我们需要编译构建前端工程的时候，运行这个配置项即可自动编译构建；
更改Java Scripts 版本：
默认情况下iedea是不支持ES6的语法的，需要我们配置一下：
进入iedea：perferences -> Language&Frameworks -> JavaScript 将版本设置为ES6 即可。
第7步 更改Webpack打包文件的输出目录
Webpack默认是将打包后文件输出到前端项目根目录下的dist文件夹中的，这一点显然不符合我们服务端项目的规范，在dist目前中的文件也是不能正常访问的，我们需要将目录修改到 src/main/resources/static（非Spring Boot 项目可能是其他目录，按照这种方式修改配置即可） 目录下：
打开frontend/config/index.js 文件，将css、js Map源文件生成的配置取消，可以提高编译打包的速度，当你需要进行前端debug的时候将配置设置成true即可。
中间的三个红框，即配置了webpack打包文件的输出目录，请参照上图进行配置。
第8步 编译打包测试运行
经过以上的步骤，我们的基本开发环境就构建好了，运行一下npm编译打包程序：
运行完成后查看打包文件是否输出到了我们配置的目录下，确认无误后，启动服务端项目并在浏览器中访问http://localhost:8080 (注：此处用的Spring Boot 默认的启动方式，如果用Tomcat启动话，端口号需要换成Tomcat 的端口)，正常情况下会显示如下画面：
至此我们的基本环境的构建就做完了。
5.2 在前端工程化的项目中使用iView
第1步 引入iView-UI组件库
整体引入：
在 frontend/src/main.js 文件中，添加如下配置：
import iView from 'iview'
Vue.use(iView)
这种方式最大的优点是简单，但是会引入大量的iview组件，一般平时学习或者开发初期可以直接引入，这样不用考虑具体都用什么组件。这种方式相当于java中的import a.b.*
按需引入：
如果对网站载入性能有要求的情况下，我们需要对引入进行优化，按需引入。这样可以有效的减小编译后的js文件的大小，提高浏览器初次对页面的载入速度。一般移动端的项目，是要绝对做这样的优化的。
列如我们需要引入Button和Table组件，那我们在frontend/src/main.js文件中做如下配置：
import { Button, Table } from 'iview'
Vue.component('Button', Button)
Vue.component('Table', Table)
第2步 引入iview-ui 的样式
想要正常使用iview-ui 我们还要引入样式文件，方式和很简单，在frontend/src/main.js 文件中做一个css引入即可：
import 'iview/dist/styles/iview.css'
前面的两步仅仅介绍了iview-ui 的基本引入方式，详细可以参照官方文档：https://www.iviewui.com/docs/guide/start
第3步 引入axios进行异步数据交互
axios的引入方式与iview引入方式稍有差别：
import axios from 'axios'
Vue.prototype.ajax = axios
使用示例：
this.ajax.post("/work/getInitData", {}).then((response) => {
//获得相应数据
let data = response.data;
console.log(data);
}).catch(function (error) {
//异常处理
this.$Message.info(error);
console.log(error);
});
详细可以参考axios相关使用文档：
https://www.npmjs.com/package/axios
https://www.jianshu.com/p/7a9fbcbb1114