dva是淘宝团队弄的,为了支持国货,赶紧试试看咋用吧
第一步:安装 dva-cli
npm install dva-cli -g
第二步:采用dva来创建项目:
dva new myapp
cd myapp
第三步:npm start 启动起来访问路径:
http://localhost:8000/
界面效果如下:
使用 antd#
通过 npm 安装 antd
和 babel-plugin-import
。babel-plugin-import
是用来按需加载 antd 的脚本和样式的,详见 repo 。
$ npm install antd babel-plugin-import --save
编辑 .webpackrc
,使 babel-plugin-import
插件生效。
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
注:dva-cli 基于 roadhog 实现 build 和 dev,更多
.webpackrc
的配置详见 roadhog#配置
定义路由#
我们要写个应用来先显示产品列表。首先第一步是创建路由,路由可以想象成是组成应用的不同页面。
新建 route component 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>
标签。