一、官网地址
https://pro.antdv.com/
二、搭建开发环境
2.1 安装node
node下载地址:https://nodejs.org/zh-cn/download
![](https://img.haomeiwen.com/i9571610/8f3f48693be738bc.png)
下载完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
![](https://img.haomeiwen.com/i9571610/331e78ab8184615e.png)
打开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
![](https://img.haomeiwen.com/i9571610/acf6c6bd573f2190.png)
安装完后,执行yarn -v
提示 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
需要在环境变量中配置yarn
![](https://img.haomeiwen.com/i9571610/8bd93d298f7d0b6d.png)
![](https://img.haomeiwen.com/i9571610/9b739d85e8d92736.png)
![](https://img.haomeiwen.com/i9571610/5bda35298e420a48.png)
2.4 启动项目
![](https://img.haomeiwen.com/i9571610/c051767f4b118126.png)
1、先cd到项目路径下:cd E:\code2\ant-design-vue-pro
2、install:yarn install
,执行成功后,在项目目录下会生成一个目录node_modules
3、启动服务:yarn run serve
访问http://localhost:8000
,打开登录界面
![](https://img.haomeiwen.com/i9571610/71c6d48faee4135b.png)
![](https://img.haomeiwen.com/i9571610/0cd042555232bd8a.png)
![](https://img.haomeiwen.com/i9571610/fbfa119de1930f79.png)
三、跳坑
-
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);
网友评论