手把手教你搭建 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 项目开发。

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

首先全局环境下安装Umi

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

使用 create umi 搭建项目基础框架
```
	$ mkdir test-dva-umi-app & cd test-dva-umi-app
	$ yarn create umi
```
然后，选择你需要的功能进行安装，如图所示。

回车确定后，会根据选择自动创建好目录和文件。此时的目录结构如下图所示。
安装相关依赖，启动项目
```
	$ yarn / npm install
	$ yarn start / npm start
```
这时候，项目即可跑起来，打开浏览器将出现以下界面。
修改配置文件

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')
  	}

改造项目结构

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

├── 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定义各类工具函数

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

秒客网

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

工具，环境，参考资料

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

相关文章