ant design pro 前端框架

小咪咪 2022-04-08 14:41 479阅读 0赞

ant design pro 框架官网地址：[https://pro.ant.design/docs/getting-started-cn][https_pro.ant.design_docs_getting-started-cn]

一、使用环境搭建

1.安装node

node下载地址：[https://nodejs.org/en/][https_nodejs.org_en]     ，安装很简单，全部点击下一步即可（初学者）

2.安装git环境

git下载地址：[https://git-scm.com/][https_git-scm.com]

配置详细步骤抄至：[https://blog.csdn.net/qq877988484/article/details/69951089][https_blog.csdn.net_qq877988484_article_details_69951089] 博主

第一步：到git官网注册git账户

第二步：创建新项目（有创建过项目则略过）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70][]

第三步：进入项目后会出现下图界面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70 1][]

打开下载后的git-bash.exe命令窗口，先输入gitinit ,再输入上面红框内的内容，注意：git add README.md命令如果报错，则输入 touch README.md 后，然后再次git add README.md。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70 2][]克隆项目框架架构，输入命令：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-projec
t                                                                               </code></pre> </td> 
  </tr> 
 </tbody> 
</table>

第四步，

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ npm install      $npm start                                                             </code></pre> </td> 
  </tr> 
 </tbody> 
</table>

重启服务： 打开git-bash.exe，   输入npm install   ，npm start

[https_pro.ant.design_docs_getting-started-cn]: https://pro.ant.design/docs/getting-started-cn
[https_nodejs.org_en]: https://nodejs.org/en/
[https_git-scm.com]: https://git-scm.com/
[https_blog.csdn.net_qq877988484_article_details_69951089]: https://blog.csdn.net/qq877988484/article/details/69951089
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70]: /images/20220404/bbf246588a574f9da9436b8535a74ebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70 1]: /images/20220404/6a4dc69d7925479192b89b66dd785cd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDY4MTc0_size_16_color_FFFFFF_t_70 2]: /images/20220404/96ed243408c24ad1879197b466f5b071.png