手把手教你搭建 Dva + Umi 开发环境

最近开了一个新项目，使用 Dva + Umi 作为主技术栈进行开发。不得不说，当你写过原生 React 后，会发现 Dva 写起来真的是爽歪歪，他对 redux + react-router + redux-saga 进行了一层封装，减少了很多代码操作。同时加上 Umi 强大的路由处理功能，使得开发过程中又一次减少了不少踩坑操作。嗯，，我也是按照 Umi官方指南 的说明一步步来搭建的。中间好像也没产生怎样大的问题 。但我不能这样说，要不这篇就写不下去了哈哈哈哈。 接下来，总结一下搭建 Dva + Umi 项目框架的过程。

工具，环境，参考资料

• 工具：create-umi 脚手架
• 环境：node v10.4.1 npm v6.1.0 yarn v1.7.0
• 参考资料：Umi 快速上手 、 Dva快速上手 、 使用 umi 改进 dva 项目开发 。

安装脚手架，快速搭建项目基础目录

1. 首先全局环境下安装Umi

   //  使用 npm
   	$ npm install -g umi
   //  使用 yarn
   	$ yarn global add umi
   //  安装成功后将显示版本号
   	$ umi -v
   	$ umi v2.0.3

2. 使用 create umi 搭建项目基础框架

   $ mkdir test-dva-umi-app & cd test-dva-umi-app
   	$ yarn create umi

   然后，选择你需要的功能进行安装，如图所示。
   
   回车确定后，会根据选择自动创建好目录和文件。此时的目录结构如下图所示。
   

3. 安装相关依赖，启动项目

   $ yarn / npm install
   	$ yarn start / npm start

   这时候，项目即可跑起来，打开浏览器将出现以下界面。
   

4. 修改配置文件

   1） .editorconfig 该文件是配置编辑器的一些设置，这里我修改了一个缩进，indent_size = 4。因为个人比较喜欢4个缩进，看着舒服。
   2） .env 该文件是项目环境配置文件，默认的是BROWSER=none，这时候项目启动后，浏览器不会自动打开。
   3） .eslintrc 多人开发时候，一套良好的代码规范是非常必要的。这里配置了一份基础eslint文件，供参考。

{
    "env": {
        "es6": true,
        "node": true,
        "browser": true,
        "mocha": true
    },
    "extends": ["eslint:recommended", "react-app"],
    "rules": {
        "strict": "error",
        //"indent": ["error", 4, { "SwitchCase": 1 }],
        "eqeqeq": "error",
        "no-lone-blocks": "error",
        "no-lonely-if": "error",
        "no-multi-spaces": "error",
        "no-multiple-empty-lines": ["error", { "max": 2 }],
        "no-param-reassign": "error",
        "no-spaced-func": "error",
        "no-use-before-define": "warn",
        "no-unused-vars": "warn",
        "no-with": "error",
        "default-case": "error",
        "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
        "comma-spacing": ["error", { "before": false, "after": true }],
        "generator-star-spacing": ["error", { "before": true, "after": false }],
        "semi": ["warn", "always", { "omitLastInOneLineBlock": true }],
        "no-restricted-globals": "off",
        "array-callback-return": "off",
        "no-console": [
            "warn",
            {
                "allow": ["info", "warn", "error", "time", "timeEnd"]
            }
        ],
        "react/react-in-jsx-scope": "warn"
    }
}

4） .umirc 主要配置一些代理，主题，alias，插件，诸如此类。

theme: {
    	'primary-color': '#4961AB',
    	'border-radius-base': 0
 	 },

extraBabelPlugins: [
    	['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]
  	]

proxy: {
    	'/api': {
      	target: 'http://127.0.0.1:10000/',
      	changeOrigin: true,
      	pathRewrite: { '^/api': '' }
    	}
  	},

alias: {
    	'@styles': path.resolve(__dirname, 'src/components/styles'),
    	'@components': path.resolve(__dirname, 'src/components'),
    	'@utils': path.resolve(__dirname, 'src/utils')
  	}

5. 改造项目结构

初始的目录结构一般是不足以满足项目需求的，这里改造目录如下。

├── src
    ├── assets
    │   ├── images
    │   └── icon
    ├── components
    ├── config
    ├── global.css
    ├── layouts
    │   ├── index.js
    │   └── index.less
    ├── models
    │   └── example.js
    ├── pages
    │   ├── index.js
    │   ├── index.less
    │   └── Example
    │       ├── index.js
    │       ├── index.less
    │       ├── models
    │       ├── services
    │       └── components
    └── utils
        ├── index.js
        └── request.js

其中：

• assets用于存放静态资源，如项目中所需要的图片或Icon等
• components公共组件目录
• config配置文件目录
• global.css全局样式表
• pages项目路由，各页面入口
• services定义后端的接口调用
• models定义各model
• utils定义各类工具函数

---

搭建攻略就这么多啦，希望对你有所帮助。也欢迎一起探讨，共同进步。