非你网

开始安装 ant design pro

流程参考

https://blog.vini123.com/359

关于路由这块，需要再说明一下。路由有 laravel 的路由，还有 ant design pro 的路由，以及 nginx 的 location 的。

既然后台访问的域名为 xxx/admin/ , 而接口也是 xxx/admin/，这个时候就需要针对该情况的 nginx 的配置。根据 nginx 的 location 的优先级以及正则等原则，可以配置nginx的匹配规则如下：

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

# 后台接口统一加了 api
    location ^~ /admin/api/ {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location /admin/  {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

# 编辑重启
sudo vim /etc/nginx/sites-available/admin.com
sudo nginx -s reload

ant design pro 相关

话说，要用就用最新的 V4（pro v4 以及 ant design v4），要用就用 TypeScript 。话说，还是得从零开始学一下 TypeScript。 那么之前做的部分工作，可以先暂停。

https://zhuanlan.zhihu.com/antdesign

https://www.zhihu.com/topic/20178853/hot

https://zhuanlan.zhihu.com/p/67498559

那么，我们把之前的 js 版本的 ant design pro 干掉。然后重启一个分支来做 typescript 版本的 ant design pro

# 先看看哪个提交时初始化创建 ant design pro
git log -n 6 --oneline

# 找到对应的 hash，回滚回去
git reset --hard xxxx

# 强提交
git push --force

# 开始新建分支
git checkout -b antdesign

# 所有的 ant design pro 相关的全在这个分支上干

npm create umi

# 选择 ant design pro， 选择 typescript ，y

npm install

# 再继续

git add .
git commit -m 'ant design pro v4 initialize'
git push --set-upstream origin antdesign

当使用 define 的方式定义全局常亮，typescript 再非定义位置报错问题处理。 需要在 typings.d.ts 中配置。
参考： https://pro.ant.design/docs/environment-variables-cn#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E4%BB%A3%E7%A0%81%E4%B8%AD%E6%8A%A5%E9%94%99%E7%9A%84%E5%A4%84%E7%90%86%E6%96%B9%E5%BC%8F

ant design pro

一边学，一边使用 ant design pro。看到不明白的就开始查查查。

第一个 useState
useState(0) 是最新的 hooks api

https://segmentfault.com/a/1190000018781083?utm_source=tag-newest