相关概念
1、npm: Nodejs下的包管理器。
2、webpack: 它主要的用途是通过CommonJS的语法，把所有浏览器端需要发布的静态资源，做相应的准备，比如资源的合并和打包。
3、vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
安装环境
1、安装Nodejs环境，参考【Node.js】安装及使用
2、安装好nodejs之后，自然就有npm包管理器
3、配置配置淘宝 NPM 镜像（注：为配置淘宝镜像，会导致一些报错，一些依赖无法下载）
命令：npm config set registry https://registry.npm.taobao.org
4、显示配置信息
命令：npm config list
项目搭建
1、安装vue脚手架，命令：npm install -g @vue/cli
2、验证vue是否安装成功
命令: vue -V
3、创建一个Vue项目
命令：vue create vue_test
其中选择Vue 3 模板
注意：vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。
3、进入项目目录
命令：cd vue_test
4、运行
命令：npm run serve
使用浏览器打开地址http://localhost:8080，进行访问
5、生成静态文件(生成静态文件，打开dist文件夹下新生成的index.html文件，可以将dist文件打包放到服务器上去访问)
命令：npm run build
Vue项目目录描述
vue_test/
|-- node_modules : 依赖包文件夹
|-- (各种依赖包)
|-- public : 静态资源文件夹，不经过 webpack 处理
|-- favicon.ico : 网站图标
|-- index.html : 主 HTML 文件，应用的模板
|-- src : 源码文件夹
|-- assets : 资源文件夹，存放需要经过 webpack 处理的静态资源
|-- logo.png : Vue logo 图片（示例）
|-- components : Vue 组件及其相关资源文件夹
|-- HelloWorld.vue : 示例组件
|-- App.vue : 应用根主组件
|-- main.js : 应用的入口文件，用于创建 Vue 实例并挂载到 DOM
|-- .gitignore : Git 版本控制忽略文件配置
|-- babel.config.js : Babel 配置文件，用于 JavaScript 转译
|-- jsconfig.json : JavaScript 项目配置文件
|-- package-lock.json : 依赖版本锁定文件
|-- package.json : 项目配置文件，包含项目元数据、依赖和脚本命令
|-- README.md : 项目说明文档
|-- vue.config.js : Vue CLI 配置文件（可选，需手动创建）
项目的打包与发布
打包
命令：npm build
会在项目目录中生成dict目录（里面包含了html、js、css）
发布
发布一：使用npm工具包serve，serve搭建本地服务器
步骤如下：
全局安装serve：npm install -g serve 。
启动本地服务器：serve 目标文件夹。
serve target-folder。
serve target-folder -p 3030。-p，指定端口。
serve target-folder -C。-C或者--core，可跨域。
本例运行命令：serve dict
浏览器输入地址：http://localhost:3000 即可访问
发布二：使用动态 web 服务器(tomcat)
1、修改配置: vue.config.js: { publicPath: '/xxx' //打包文件夹的名称 }
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: '/vue_test'
})
2、重新打包: npm run build
3、修改 dist 文件夹为项目名称: xxx
4、将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
5、访问: http://localhost:8080/xxx
