文章试炼

Umi搭建项目

基于 Umi + dva + React + Antd 搭建项目。

功能

  • [x] Umi+dva+react+antd
  • [x] sass/less
  • [x] Dashboard
  • [x] mock数据
  • [x] proxy代理
  • [x] 全局样式
  • [x] 权限测试
  • [x] 404 / 403
  • [x] 上传七牛
  • [x] Eslint校验
  • [x] px转rem
  • [x] 部署上线

目录结构介绍

├── dist/                           // 默认的 build 输出目录
├── mock/                           // mock 文件所在目录,基于 express
└── config/
    ├── config.js                   // umi 配置,同 .umirc.js,二选一
    ├── router.config.js            // 路由配置
└── src/                            // 源码目录
    ├── layouts/index.js            // 全局布局
    └── pages/                      // 页面目录,里面的文件即路由
        ├── .umi/                   // dev 临时目录,需添加到 .gitignore
        ├── .umi-production/        // build 临时目录,会自动删除
        ├── document.ejs            // HTML 模板
        ├── 404.js                  // 404 页面
        ├── page1.js                // 页面 1,任意命名,导出 react 组件
        ├── page1.test.js           // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js                // 页面 2,任意命名
    ├── global.css                  // 约定的全局样式文件,自动引入,也可以用 global.less
    ├── global.js                   // 可以在这里加入 polyfill
    ├── app.js                      // 运行时配置文件
    ├── manifest.json               // 应用清单,暂时不清楚
    ├── service-worker.js           // 做离线缓存的新的api实现
├── tests/                          // umi内置jest的测试文件    
├── .umirc.js                       // umi 配置,同 config/config.js,二选一
├── .env                            // 环境变量
├── .editorconfig                   // 维护代码风格的配置文件
├── .eslintignore                   // Eslint忽略文件
├── .eslintrc.js                    // Eslint配置文件
├── .gitignore                      // git要忽略的文件
├── .prettierignore                 // Prettier要忽略的文件
├── .prettierrc.js                  // Prettier代码格式化配置文件 
├── .stylelintrc.js                 // css代码审查的配置文件
├── CNAME                           // 规范名字,暂时不知道啥意思
├── jest-puppeteer.config.js        // puppeteer的配置文件
├── jest.config.js                  // Facebook出的单元测试的配置文件
├── jsconfig.jso                    // jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项
├── package.json                    // npm依赖记录文件
├── tsconfig.json                   // ts的配置文件,指定了用来编译这个项目的根文件和编译选项
└── yarn.lock                       // yarn用来锁定npm依赖的文件

搭建步骤

1、使用 UmiJs 构建项目

node版本>=8.10, 推荐nvm管理node版本,yarn管理npm依赖(使用国内源)

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
$ 1.16.0

全局安装 umi,并确保版本是 2.0.0 或以上

$ yarn global add umi
$ mkdir umi-project && cd umi-project
$ yarn create umi

然后在选项中选择想要的项目,一般选择app(移动项目)或者antd-pro(pc项目)

? Select the boilerplate type (Use arrow keys)
  ant-design-pro  - 包含 ant-design-pro 布局的脚手架
❯ app             - 通用项目脚手架
  block           - 区块脚手架
  library         - 插件脚手架
  plugin          - 依赖(组件)库脚手架

然后选择基础的配置项,一般前四个

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd                 - 包含antd
 ◯ dva                  - 包含dva
 ◯ code splitting       - 包含按需加载
 ◯ dll                  - 包含dll二次启动加速
 ◯ internationalization - 国际化

接下来安装依赖并启动

$ yarn
$ npm start

此时,项目已经启动,通过 http://localhost :8000 访问

注意:react@16.9.0会有警告

Warning: componentWillMount has been renamed, and is not recommended for use

解决方案:固定package.json中react和react-dom的版本

"react": "16.8.6",
"react-dom": "16.8.6"

删除node_mudules, 执行yarn重新安装,哇,世界干净了,8:43pm, 先回家再说。

2、配置 Eslint规则

umi配置了一套基础的校验规则,在下图里配置文件中,需要添加新的规则的话,要注意合并,如下:

//配置.eslintrc.js
const { strictEslint } = require('@umijs/fabric');

// 需要手动修改规则的话这样合并进去
const rules = {
  "max-len": 0,
  ...strictEslint.rules,
}
module.exports = {
  ...strictEslint,
  rules,
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
  },
};

3、配置本地服务启动端口和代理

package.json中修改

"start": "PORT=3000 umi dev",
config/config.js中添加

proxy: {
    '/api': {
      target: 'https://kai.maihaoche.net',
      changeOrigin: true,
    },
},

项目截图

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章