dva的使用项目初始化

使用步骤
  • 第一步安装 通过 const app = dva();
  • 第二部使用插件 app.use(createLoading());
  • 第三部注册model app.model(require(‘./models/item’));
  • 第四部注册router app.router(require(‘./router’));
  • 第五步开始 app.start(‘#root’);
dva 初始化项目


  • 安装dva-cli
  • dva new app
  • cd app
  • cnpm start
  • 使用antd 安装通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的,详见 repo

$ npm install antd babel-plugin-import –save

编辑 .roadhogrc,使 babel-plugin-import 插件生效。

“extraBabelPlugins”: [
- “transform-runtime”
+ “transform-runtime”,
+ [“import”, { “libraryName”: “antd”, “style”: “css” }]
],

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dva是一个基于Redux、React、Redux-saga等技术的轻量级框架,用于简化React应用的开发。Dva提供了一些约定和API,可以帮助我们更快速地开发React应用。以下是在React中使用dva的简单步骤: 1. 创建一个基于dva的React应用 使用dva-cli工具创建一个新的dva项目: ``` $ npm install dva-cli -g $ dva new myApp ``` 2. 引入dva和相关依赖 在src/index.js文件中引入dva和相关依赖: ```javascript import dva from 'dva'; import './index.css'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model // app.model(require('./models/example').default); // 4. Router // app.router(require('./router').default); // 5. Start app.start('#root'); ``` 3. 编写dva model 在src/models/目录下创建一个新的model文件,例如user.js: ```javascript export default { namespace: 'user', state: { list: [], }, reducers: { save(state, { payload: { list } }) { return { ...state, list }; }, }, effects: { *fetch({ payload }, { call, put }) { const { data } = yield call(queryUsers); yield put({ type: 'save', payload: { list: data, }, }); }, }, }; ``` 这个model定义了一个namespace为'user'的model,包括了state、reducers和effects三个部分。其中reducers用于处理同步操作,effects用于处理异步操作。 4. 注册dva model 在src/index.js文件中注册刚才编写的model: ```javascript import dva from 'dva'; import './index.css'; import user from './models/user'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model app.model(user); // 4. Router // app.router(require('./router').default); // 5. Start app.start('#root'); ``` 5. 使用dva connect连接组件和model 在需要使用model的组件中,使用dva提供的connect方法连接组件和model: ```javascript import { connect } from 'dva'; function Users({ dispatch, users }) { function handleClick() { dispatch({ type: 'user/fetch', }); } return ( <div> <h1>List of users</h1> <button onClick={handleClick}>Fetch users</button> <ul> {users.list.map((user, index) => ( <li key={index}>{user.name}</li> ))} </ul> </div> ); } export default connect(({ user }) => ({ users: user }))(Users); ``` 这个组件使用了connect方法连接了'user'命名空间下的state和dispatch到组件的props中。 6. 运行应用 使用npm start命令启动应用: ``` $ cd myApp $ npm start ``` 以上是在React中使用dva的简单步骤,具体使用可以参照dva官方文档和示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值