相关概念
1、npm: Nodejs下的包管理器。
2、webpack: 它主要的用途是通过CommonJS的语法，把所有浏览器端需要发布的静态资源，做相应的准备，比如资源的合并和打包。
3、vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
安装环境
1、安装Nodejs环境，参考【Node.js】安装及使用 ，或者使用nvm工具安装
2、Node版本，v20.16.0，安装好nodejs之后，自然就有npm包管理器
3、配置配置淘宝 NPM 镜像（注：为配置淘宝镜像，会导致一些报错，一些依赖无法下载）
命令：npm config set registry https://registry.npm.taobao.org
4、显示配置信息
命令：npm config list
Vue2项目搭建
1、安装vue脚手架，参考：Home | Vue CLI
命令：npm install -g @vue/cli
2、验证vue是否安装成功
命令: vue -V
3、创建一个Vue项目
命令：vue create vue_test
按下，其中选择Vue 2模板
注意：出现Successfully 表示创建成功
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 配置文件
相关文件说明
package.json
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ // 模板解析 // ==== h: 这个参数是一个函数，通常称为 createElement。 render: h => h(App), // ==== 精简版vue无法解析模板template， // 所以使用render，解析模板 // template: '<h1>hello</h1>' }).$mount('#app')
index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 开启移动端的理想视口 --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 配置页签图标 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页标题 --> <title> <%= htmlWebpackPlugin.options.title %> </title> </head> <body> <!-- 当浏览器不支持js时noscript中的元素就会被渲染 --> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!-- 容器 --> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
项目的打包与发布
打包
命令：npm run build
生成目录dist
注意：默认打包项目名是 '/'
发布
发布一：使用npm工具包serve，serve搭建本地服务器
步骤如下：
全局安装serve：npm install -g serve 。
启动本地服务器：serve 目标文件夹。
serve target-folder。
serve target-folder -p 3030。-p，指定端口。
serve target-folder -C。-C或者--core，可跨域。
本例运行：
1、进入dict目录，命令：cd dist
2、启动serve服务，命令：serve ./
浏览器输入地址：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
