前端（五）：前端工程化
前端工程化是指在企业级的前端开发项目中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
一、环境准备
（一）环境准备
1、Vue-cli：是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
2、Vue-cli提供的功能：统一的目录结构、本地测试、热部署、单元测试、集成打包上线。依赖环境：node.js
（二）node.js下载
地址（中文）：https://nodejs.cn/download/
点击下载的文件，安装，修改安装位置，一直点next，直到install。
（三）验证node.js的环境变量
配置node.js的环境变量（安装好后会自动配置），验证node.js环境变量。
（四）配置npm全局安装路径
配置node.js的打包资源管理器npm的全局安装路径，“npm config set prefix “D:\javaSoftware\helpTools””
切换npm的淘宝镜像（为了后期的加速下载）,如不成功可在网上搜索最新的淘宝镜像地址
npm config set registry https://registry.npmmirror.com
（五）安装Vue-cli
//安装
npm install -g @vue/cli
//判断是否安装成功
vue --version
二、Vue项目简介
（一）创建
//方法一：通过命令行创建
vue create vue-project01
//方法二：图形化界面
vue ui
以下为图形化界面创建：
①在桌面创建一个Vue文件夹，进入文件夹cmd
②输入vue ui，回车（不要关闭控制面板！！！！）
③创建
回到命令提示符面板，回车一下（下载），显示project created表示下载成功
此刻，Vue文件里面生成了vue-project01文件
在vscode中打开：
（二）Vue目录结构
①node_modules:整个项目的依赖包
②public:存放项目静态文件
③src:存放项目源代码
④package.json:模块基本信息，项目开发所需要模块，版本信息
⑤vue.config.js:保存vue配置的文件，如。代理、端口的配置等。
（三）启动vue项目
①方式一：命令行
npm run serve
②图像化界面
设置完后重启vscode,并点击package.json。
运行成功：
③修改前端配置中的端口号，避免和tomcat端口号冲突
首先，停止当前服务，ctrl+c,输入Y
修改配置：
配置完成后再次启动：
