Vue3 + Vue Cli 搭建项目（详细）

 

搭建：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/cli@5.0.8# 查看版本
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。