版权声明:本文为博主原创文章,转载请放上原文链接。 https://blog.csdn.net/brand2014/article/details/79060854
本来自己还是更喜欢学习Vue的(学起来相比Angular和React都容易一些),但是公司最近突然想用react(主要用 Ant-Disign 这个UI框架)重构之前的项目,所以暂时只有把Vue放一边了,开始学习React~~
前言
需要自己先安装好node和npm(或者cnpm)
按照官方文档,把项目跑起来吧
先放文档地址:React文档英文版 ;React文档中文版
安装 React.js
使用 React.js不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel;需要Redux等第三方的状态管理工具来组织代码;如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。React官方推荐的工具是***create-react-app***,
1.安装 create-react-app构建项目并启动项目
cnpm install -g create-react-app
create-react-app my-demo
cd my-demo
cnpm start
2.引入react-router和ant design(ant-design是我的项目所需)
cnpm install react-router-dom --save
cnpm install antd --save
此时的目录结构如图:
3.以目前的项目结构配置,运行ant design的组件时,会加载ant design全部代码,为了能够提高性能,做到按需加载,需要进行配置。
cnpm run eject //可将所有内建的配置暴露出来,做自定义配置
此时的目录结构如图:
4.引入一个按需加载的组件
cnpm install babel-plugin-import --save-dev
//如果没有使用按需加载,使用组件的方式为:
import Button from 'antd/lib/button';
@import '~antd/dist/antd.css';//在css文件顶部引入样式
5。修改配置,使按需加载生效
我目前知道的有两种方式:一种是ant-design光放文档中的方式,这是地址,请自行阅读:使按需加载生效,另一种方式感觉比较简单一点,修改package.json文件
在package.json文件中的“bable”下加入如下代码:
"plugins": [
["import",{"libraryName":"antd-mobile","style": "css"}]
//注意使用双引号
]
然后将修改代码中的组件引入方式:
import {Button} from 'antd';
//不需要再单独引入css
到此刻,使用Ant-Design这个UI框架的环境搭建完成了,接下来就可以进行前端其他的开发工作了!