# dva架构创建react项目流程及注意事项
dva是一个基于react和redux的轻量应用框架
# 安装dva-cli
- 通过
npm
安装并确保版本是0.7.0
或以上
$ npm install dva-cli -g
$ dva -v
0.7.5
1
2
3
2
3
# 创建新应用
$ dva new dva-quickstart
1
!> 注:创建项目后,package.json中,roadhog版本为^0.4.0,应改为^0.5.3,否则不能使用roadhog的mock服务
# 使用antd
UI框架
- 通过
npm
安装antd
和babel-plugin-import
。babel-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
2
3
4
!> 注:如果要使用less预编译工具,"style",应设置为true
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": true }]
],
1
2
3
4
2
3
4
# 配置代理
- 修改
.roadhogrc
,加上proxy
配置,能通过RESTFul的方式访问
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},
1
2
3
4
5
6
7
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
2
3
4
5
6
7
8
9
- 在
components
目录下新建theme.less
文件,自己写的样式中关于换肤的样式全部放在该文件中
@main-bg-color: #404040;
@main-color: #03c449;
1
2
2
# 多页面应用
- 如果是开发多页面应用(即多个html),需修改
.roadhogrc
文件
"entry": "src/pages/**/*.js",
...
"multipage": true,
1
2
3
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
2
3
4
5
6
!> 注:common文件的引入要在其它文件之前