Ant Design Pro 学习 (1) - 创建项目

前言

我是.NET出身，前端只熟悉HTML+JQuery+CSS。
一天忽然有了心思要做一个.NET Core + React前后端分离的网站，后端相对熟悉一些，学习成本不高，算是梳理知识加夯实基础。React着实没有怎么接触过。在学习的过程中，先是接触了到轻量级框架Next.js，学了一通准备开搞又被网站样式的问题的拦住了路。然后找到了阿里的产品Ant Design，大体看了下，准备开搞，又发现了Ant Design Pro这个基于脚手架，于是便有了“拿来主义”的心思，这样可以快速搭建网站。

项目搭建

Node环境我在之前已经搭建过了，这里不再详述，直接从安装脚手架开始。
npm i @ant-design/pro-cli -g
创建项目
pro create novel-together
安装依赖
cd novel-together && npm install
启动程序npm start，注意不是npm run dev，因为默认是关闭mock的，这样会导致Mock API无法访问。

访问本地地址 http://localhost:8000 ，可以进入到登录界面。

修改登录界面

1. 修改网站的名字，去掉副标题
   src\pages\User\Login\index.tsx
   
2. 修改文本框的占位文字
   src\locales\zh-CN\pages.ts
   
3. 修改页脚
   src\components\Footer\index.tsx

src\locales\zh-CN.ts
   
4. 效果如下图所示：

• 登录表单
  
• 页脚
  

总结

Good，有了门面，下一节开始做登录的验证。