搭建：Vue CLI 5 + Vue 3 + Ant Design Vue 3
- Vue CLI 5：是vue + 大量的第三方组件；
- Vue 3：是页面开发基于Vue；
- Ant Design Vue 3：是基于Vue3的UI组件；关于UI还有CSS的Bootstrap。
1. 本地环境准备
按照NodeJS得到npm，使用npm安装 vue cli(脚手架)，使用vue cli创建项目。
Vue CLI 5 需要安装 Nodejs 18及以上。
NodeJS官网：https://nodejs.org/zh-cn/
Vue CLI 官方文档：https://cli.vuejs.org/zh/guide/
1) Node18安装
目前使用最多的是14，16，18，20。已经下载过有不同版本的直接修改配置就好了。
下载好后点击安装，设置好路径后直接 next 下一步，不需要选任何东西。
到这里也不需要勾选。
install -> finish完成。
Win + R -> cmd 窗口查看一下版本。
# node 版本 node -v # npm 版本 npm -v
出现版本号正常，则成功。
npm 属于 nodejs 内的工具，安装完 node 后 npm 会带上，无需额外单独安装。
2) 配置环境
计算机属性 -> 高级系统设置 -> 环境变量 -> Path
由于 node 使用 npm 命令安装时默认在 C盘，node后期安装插件等占据内存很大，所以很不建议默认路径在C盘。
手动设置改变路径，设置nodejs prefix（全局）与 cache（缓存）路径。
nodejs安装目录下新建文件夹：node_global 和 node_cache
# 查看 prefix 全局 npm get prefix # 查看 cache 缓存 npm get cache
查出来是在C盘的路径下。
# 修改 prefix npm config set prefix "安装路径\node_global" # 修改 cache npm config set cache "安装路径\node_cache"
3) 设置淘宝镜像及淘宝cnpm
# 下载镜像源 # 查看镜像源 npm config get registry # 配置 npm config set registry https://registry.npmmirror.com/ npm config set registry https://registry.npm.taobao.org/
完成后再次查看一下镜像源。
# 安装cnpm # 配置一 npm install -g cnpm --registry=https://registry.npm.taobao.org # 配置二 npm install -g cnpm --registry=https://registry.npmmirror.com
配置一和二都是淘宝提供的 npm 镜像源。
配置一用于加速npm包的下载，但已被配置二 npmmirror服务 取代。
配置二是新的 npm镜像源，更好的服务稳定性和更新速度。推荐使用配置二。
# 查看 cnpm -v
若是安装完 cnpm 或 执行 cnpm命令 出现 [不是内部或外部命令，也不是可运行的程序]。把当前终端窗口关闭 重新 cmd 打开重新安装。
注意：如果在 2)配置环境 或 安装cnpm 时出现错误说：关于权限。需要将安装的nodejs路径的包提权。右键 -> 属性 -> 安全 / 编辑 对 Authenticated ... 的权限。
4) 设置用户变量
计算机属性 -> 高级系统设置 -> 环境变量 -> 用户变量 -> Path 添加 node_global 安装全路径。
计算机属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> 新建：
Path 新建环境变量添加路径。
5) 安装 vue cli
# vue2 脚手架命令 nmp install -g # vue3 脚手架命令(默认最新) npm install -g @vue/cli # vue3 脚手架命令(指定版本) npm install -g @vue/[email protected] # 查看版本 vue -V
Win + R -> cmd -> 选择版本执行安装。
问题一：在 vue 安装过程中遇到 npm error code ECONNRESET 是网络不是很好导致。
问题二：在 vue 安装过程中遇到 npm error code CERT_HAS_EXPIRED 是因为镜像源的问题，重新执行一下 3) 设置淘宝镜像及淘宝cnpm 就可以了。
问题三：如果使用 vue 指令表示 vue 不存在，可以重启电脑，如果既然不行，计算机属性 -> 高级系统设置 -> 环境变量 -> 用户变量 / Path 添加：
注意自己的路径，\AppData\Roaming\npm 是固定的。
2. 创建vue3项目
1)
在本地目录下，找一个想要存放的路径。在路径栏 cmd 进入终端窗口。
# 创建项目 vue create 项目名
进来后使用 上下左右 方向键控制，空格选中，回车下一步。选错了关闭重来。
根据项目需求选择配置。
| Banel | 将现代的JavaScript转译为兼容旧版本浏览器JavaScript代码。 |
| TypeScript | TS是JavaScript的超集，增加了类型检查功能。 |
| Progressive Web App(PWA)Support | 支持 PWA 特性，允许应用像原生应用一样在用户设备上运行。包括离线、推送通知等功能。 |
| Router | Vue.js的官方路由库，允许在单页应用中实现不同页面的导航、转发。 |
| Vuex | Vue.js的状态管理库，应用于管理应用的全局状态，方便多个组件之间共享数据。 |
| CSS Pre-processors | 允许项目中使用CSS预处理器，扩展CSS功能。 |
| Linter / Formatter | 严格模式，会检测代码是否符合规范。 |
| Unit Testing | 单元测试。 |
| E2E Testing（End-to-End Testing） | 端到端测试支持。 |
选好后回车选择版本。
yes==历史路由，浏览器 / 连接的路径。
回车后起个名字即可。
项目创建完成。 进入目录，运行就可以启动项目。
浏览器可以直接访问。
使用VScode打开项目 初始的样子。
启动项目在终端：
# 启动 npm run serve # 打包 npm run build
停止项目运行，Ctrl + C。
标签：npm,node,vue,Cli,路径,Vue,Vue3,安装 From： https://www.cnblogs.com/warmNest-llb/p/18519166