美文网首页
Ant Design Pro Vue使用

Ant Design Pro Vue使用

作者: AC编程 | 来源:发表于2023-07-25 10:33 被阅读0次

一、官网地址

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);

相关文章

网友评论

      本文标题:Ant Design Pro Vue使用

      本文链接:https://www.haomeiwen.com/subject/fmkcpdtx.html