# dva架构创建react项目流程及注意事项

dva是一个基于react和redux的轻量应用框架

# 安装dva-cli

  • 通过 npm安装并确保版本是0.7.0或以上
$ npm install dva-cli -g
$ dva -v
0.7.5
1
2
3

# 创建新应用

$ dva new dva-quickstart
1

!> 注:创建项目后,package.json中,roadhog版本为^0.4.0,应改为^0.5.3,否则不能使用roadhog的mock服务

# 使用antdUI框架

  • 通过npm安装antdbabel-plugin-importbabel-plugin-import是用来按需加载antd的脚本和样式的。
$ npm install antd babel-plugin-import --save
1
  • 安装成功后,编辑.roadhogrc,使babel-plugin-import插件生效
"extraBabelPlugins": [
    "transform-runtime",
    ["import", { "libraryName": "antd", "style": "css" }]
],
1
2
3
4

!> 注:如果要使用less预编译工具,"style",应设置为true

"extraBabelPlugins": [
    "transform-runtime",
    ["import", { "libraryName": "antd", "style": true }]
],
1
2
3
4

# 配置代理

  • 修改.roadhogrc,加上proxy配置,能通过RESTFul的方式访问
"proxy": {
    "/api": {
      "target": "http://jsonplaceholder.typicode.com/",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
},
1
2
3
4
5
6
7

可添加多个代理

# Mock数据

  • 在项目根目录下新建.roadhogrc.mock.js文件,可安装mockjs插件配合使用

# 换肤

  • src目录下新建theme.js文件,修改.roadhogrc文件
"theme": "./src/theme.js"
1
  • theme.js文件格式如下
module.exports = () => {
    return {
      'body-background': '#ececec',
    	'primary-color': '#03c449',
    	'border-radius-base': '3px',
      'font-size-base': '14px',
      'link-color': 'rgba(0, 0, 0, 0.65)',
    };
};
1
2
3
4
5
6
7
8
9
  • components目录下新建theme.less文件,自己写的样式中关于换肤的样式全部放在该文件中
@main-bg-color: #404040;
@main-color: #03c449;
1
2

# 多页面应用

  • 如果是开发多页面应用(即多个html),需修改.roadhogrc文件
"entry": "src/pages/**/*.js",
...
"multipage": true,
1
2
3
  • 在HTML文件中需引入公用样式及JS
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="index.css" />


<script src="common.js"></script>
<script src="index.js"></script>
1
2
3
4
5
6

!> 注:common文件的引入要在其它文件之前

Last Updated: 3/30/2021, 8:56:43 AM