Ant Design Pro Vue使用

一、官网地址

https://pro.antdv.com/

二、搭建开发环境

2.1 安装node

node下载地址：https://nodejs.org/zh-cn/download

node下载

下载完node安装包后点击安装，最好使用默认安装路径(C盘)

本次node安装版本：node-v16.17.0-x64.msi

2.2 下载Ant Design Pro Vue源码

官网教程：https://pro.antdv.com/docs/getting-started
源码下载地址：https://github.com/vueComponent/ant-design-vue-pro.git

2.3 Yarn

2.3.1 强烈推荐使用Yarn而不是npm

官方文档上有写使用Yarn进行install和run

Yarn

打开Ant Design Pro Vue源码的README.zh-CN.md文档，强烈建议本项目使用yarn管理，一开始我是使用npm导致出现一堆问题，无法启动项目，因此强烈使用yarn

2.3.2 安装Yarn

Yarn是facebook发布的一款取代npm的包管理工具。

执行安装命令：npm install -g yarn

根据提示，再执行npm install -g npm@9.8.1

安装Yarn

安装完后，执行yarn -v 提示 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

需要在环境变量中配置yarn

环境变量 环境变量 环境变量

2.4 启动项目

启动项目

1、先cd到项目路径下：cd E:\code2\ant-design-vue-pro
2、install：yarn install，执行成功后，在项目目录下会生成一个目录node_modules
3、启动服务：yarn run serve

访问http://localhost:8000，打开登录界面

启动 启动成功 登录界面

三、跳坑

• npm与yarn：一开始使用npm来管理项目，一堆报错，根本无法启动编译启动项目，后来换成yarn才成功启动项目

• node版本：一开始下载安装的是最新node版本：node-v18.17.0-x64.msi，项目能install成功，但启动项目的时候就报错，最后node版本换成node-v16.17.0-x64.msi，项目启动成功。报错信息如下：

Extracted theme color css content length: 26565
node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);