前端工程化是指在企业级的前端开发项目中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
一、环境准备
(一)环境准备
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的淘宝镜像(为了后期的加速下载),如不成功可在网上搜索最新的淘宝镜像地址
java
npm config set registry https://registry.npmmirror.com
(五)安装Vue-cli
java
//安装
npm install -g @vue/cli
//判断是否安装成功
vue --version
二、Vue项目简介
(一)创建
java
//方法一:通过命令行创建
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项目
①方式一:命令行
java
npm run serve
②图像化界面
设置完后重启vscode,并点击package.json。
运行成功:
③修改前端配置中的端口号,避免和tomcat端口号冲突
首先,停止当前服务,ctrl+c,输入Y
修改配置:
配置完成后再次启动: