【Ant Design】只需几步就可以搭建属于自己的前端页面

准备工作，需要电脑安装node，git和yarn，这个不是我说的，是官网说的，不过在安装这个框架的时候我还没有发现哪里有用到yarn，估计在之后会用到，就先安上吧。

 

一、工具准备

node的安装

https://nodejs.org/zh-cn/download/

安装完了之后再cmd中查看node的版本

node -v

再查看npm的版本

npm -v

 

git的安装

https://git-scm.com/downloads

安装完成之后查看版本，我本机的版本偏老旧。

git --version

 

yarn的安装

https://yarnpkg.com/getting-started/install

安装完了之后查看一下版本

 

直接去官网找一个稳定版本下载安装，作为一个程序员这就是动一动鼠标操做，完全不用教。

上面的截图也够看出来我安装的版本

node v14.16.0,npm是安装node自带的

git是2.19.1

yarn是1.22.10

 

版本不一致没有事，但是如果中间出问题解决不了，就请换一个版本再试一次，因为我就是这么做的。

 

接下来就开始走上了前端的不归路了。

 

 

二、走上不归路

 

1.新建一个空文件夹

在对应的文件夹里面打开cmd运行 npm create umi，底下是我的选择，仅供参考

如果报如下错误

npm ERR! code ENOLOCAL
npm ERR! Could not install from "Files\nodejs\node_cache\_npx\4712" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-05-14T06_21_56_795Z-debug.log
Install for [ 'create-umi@latest' ] failed with code 1

 

原因分析：node路径带有空格
执行

npm config get cache

得到 D:\Program Files\nodejs\node_cache

看到确实是program files 之间有空格

解决方案：
执行：

 npm config set cache "D:\Program~1\nodejs\node_cache"--global

 

对应的文件夹下会多出下面这些东西，这些就是通过git下载,被黑线划上的是执行完下一步才会出现的文件夹。

 

 

2.安装成功之后执行npm install，时间会比较久

 

 

 

3.执行成功之后再执行npm start，首次启动时间也是比较长。

 

在浏览器中输入localhost:8000，就会显示如下页面，然后就可以在里面进行修改了，一边学一边就修改了。