- npm install dva-cli -g
- dva -v
备注: dva-cli 版本要在 0.9.0 以上
创建新应用
dva new dva-quickstart
备注: 创建 dva-quickstart 目录, 包含项目初始化目录和文件, 并提供开发服务器, 构建脚本, 数据 mock 服务, 代理服务器等功能.
- cd dva-quickstart
- npm start
在浏览器中 http://localhost:8000 / 即可看到 dva 欢迎界面;
使用 antd
通过 npm 安装 antd 和 babel-plugin-import .babel-plugin-import 是用来按需加载 antd 的脚本和样式的
npm install antd babel-plugin-import --save
编辑. webpackrc, 使 babel-plugin-import 插件生效
- {
- "extraBabelPlugins:"[["import",{"libraryName":"antd","libraryDirrectory","es","style","CSS"}]
- ]
- }
定义路由
新建 routes/Products.js
- import React from 'react';
- const Products = (props) =>(
- <h2>LIst of Products</h2>
- );
- export default Products;
添加路由信息到路由表, 编辑 router.js
- import Products from './routes/Products';
- <Route path="/products" exact component={Products} />
然后在浏览器里打开 http://localhost:8000/#/products , 你应该能看到前面定义的 <h2> 标签.
来源: http://www.qdfuns.com/article/50981/0821f698df7dd76927b9be2799c675cf.html