react 脚手架 ------create-react-app初始化项目 --yarn 使用

短命女 2022-05-08 10:14 635阅读 0赞

距离上一次提及React的内容差不多也快1年多了，然后这一年里平胸而论觉得进步不多，然后最近因为业务需要然后都在做一些前端的工作。  
然后以前都是从npm init一路自己撸到配置package.json到写scripts那些，现在脚手架一行撸穿，还是感叹懒人的世界6666

--------------------

老规矩开篇前先案例：[https://github.com/ddwhan0123/Useful-Open-Source-Android][https_github.com_ddwhan0123_Useful-Open-Source-Android] （一篇前端文章贴安卓东西合适吗？哈哈哈哈）

--------------------

废话不多说介绍下用得比较顺手的脚手架一个是FaceBook的[create-react-app][]

一个是阿里的[Ant Design of React][]

--------------------

## 安装 create-react-app ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

学一个官网的最好方式就是看官网

先装脚手架

npm install -g create-react-app

*  1
 *  看一下版本,按版本安装creact-react-app@ 1.5.2

creact-react-app --version

create-react-app 你的项目名

*  1

然后噼里啪啦就ok了  
cd 进去

npm run start

*  1

![这里写图片描述][70]

他会创建一个很纯粹的React项目  
引用到的就是

"dependencies": {
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-scripts": "1.1.1"
      }

*  1
 *  2
 *  3
 *  4
 *  5

没有其他依赖，所以如果要自己加一些库（UI组件什么的）就自己弄了.

安装一个yarn 直接官网下载.mis文件即可.

安装react-router @4.2.0

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2][]

--------------------

## 安装 antd ##

先装脚手架

npm install antd-init -g

*  1

然后cd到你要建项目到目录

antd-init

*  1

然后跑项目

npm start

*  1

![这里写图片描述][70 1]

antd脚手架的依赖也就是多了一个自己的套餐antd

"dependencies": {
        "antd": "^3.0.0",
        "moment": "^2.19.3",
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
      }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

--------------------

## 升级版本 ##

基于dva的脚手架

首先是安装脚手架

npm install dva-cli -g

*  1

然后创建项目

dva new dvatest

*  1

运行项目

npm start

*  1

效果如图

![这里写图片描述][70 2]

创建出来的就是一个有项目目录，有“路霸“，有打包脚本的“高完成度“项目了  
![这里写图片描述][70 3]

简化了你的“立项成本“，简单好用！

但是说实话roadhog的封装解释的东西相对浅显，爬坑。。。爬坑。。。。

[https_github.com_ddwhan0123_Useful-Open-Source-Android]: https://github.com/ddwhan0123/Useful-Open-Source-Android
[create-react-app]: https://github.com/facebook/create-react-app
[Ant Design of React]: https://ant.design/docs/react/introduce-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220508/acd8f37dc0c54714b0017e8c895fea90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220508/7419097bdbbe4ba5b2564f3840ff4f8c.png
[70]: /images/20220508/874d0468227d4d6784f137d91967df44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2]: /images/20220508/99087d432b364c6fae952d4065644837.png
[70 1]: /images/20220508/ac68567b3c6847a3a550803ed5aa3377.png
[70 2]: /images/20220508/f896039f115c45e3803a5abefae54df3.png
[70 3]: /images/20220508/d7f35bd396f543cbb934a348fc969d49.png