react-项目搭建(dva+antd)

dva 是一个基于 React 和 Redux 的轻量应用框架,概念来自 elm,支持 side

effects、热替换、动态加载、react-native、SSR 等,已在生产环境广泛应用。

一、安装dva-cli

全局安装dva-cli,在终端输入

npm install dva-cli -g

确保版本是0.9.1或以上

dva -v

二、创建新项目

通过 dva new 创建新应用,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能

dva new dva-demo

三、启动项目

cd进入dva-demo目录,并启动开发服务器

cd dva-demo
npm start

《react-项目搭建(dva+antd)》

四、使用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", "libraryDirectory": "es", "style": "css" }]
+  ]
}

页面中使用antd组件

import { Table, Button, Form, Input, Select, } from 'antd';  
    原文作者:Graycrr
    原文地址: https://segmentfault.com/a/1190000016606938
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞