前端（五）：前端工程化

前端工程化是指在企业级的前端开发项目中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

一、环境准备

（一）环境准备

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

修改配置：

配置完成后再次启动：