react-项目搭建(dva+antd)

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react-项目搭建(dva+antd)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
dva 是一个基于 Reactredux 的轻量应用框架,概念来自 elm,支持 side
effects、热替换、动态加载、react-native、SSR 等,已在生产环境广泛应用。
@H_406_4@一、安装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';  

脚本宝典总结

以上是脚本宝典为你收集整理的react-项目搭建(dva+antd)全部内容,希望文章能够帮你解决react-项目搭建(dva+antd)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。