Ant Design Pro 的初始化

查看 官方文档

1. 安装初始化脚手架

   # 使用 npm
   npm i @ant-design/pro-cli -g

2. 打开将要存放项目的文件夹 创建项目

   pro create linksauce-frontend

   选择umi版本

   ? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
   ❯ umi@4
   umi@3

3. 安装yarn

   # 全局安装
   npm install -g yarn

   查看yarn版本

   yarn -version

4. 安装依赖

   yarn

5. 运行测试package.json中的start

   

   

6. 项目瘦身，有坑，可跳过！！！

   • 运行package.json中的i18n-remove去除国际化，手动删除src\locales

     如果报错，检查一下是不是没删干净，可以手动去除

     AntDesign去国际化 后 router页面显示问题：

     解决方法：执行

     yarn add eslint-config-prettier

     yarn add eslint-plugin-unicorn

     然后修改node_modules/@umijs/lint/dist/config/eslint/index.js

     // es2022: true把这个注释掉就可以解决问题

     如果不行，修改config\routes.ts如下即可：

     export default [
       { name: '登录', path: '/user', layout: false, routes: [{ path: '/user/login', component: './User/Login' }] },
       { name: '欢迎页面', path: '/welcome', icon: 'smile', component: './Welcome' },
       {
         path: '/admin',
         icon: 'crown',
         access: 'canAdmin',
         name: '管理员页面',
         routes: [
           { path: '/admin', redirect: '/admin/sub-page' },
           { path: '/admin/sub-page', component: './Admin' },
         ],
       },
       { icon: 'table', path: '/list', component: './TableList', name: '表格页' },
       { path: '/', redirect: '/welcome' },
       { path: '*', layout: false, component: './404' },
     ];

   • 删除src\tests

7. 重新安装依赖，重复第五步，确认是否能正常运行

   yarn