从零开始搭建React项目的开发环境
1. 下载并安装nodejs
首先要有运行环境**-node**,下载并安装可见我的另一篇文章**nodejs下载与安装**
2. 查看npm是否存在
如果安装好了node,自然而然就会有npm(node package manager ——node的包管理工具)了,查看如下:
win+R输入cmd打开命令提示窗口,输入npm -v验证是否存在。
出现了版本号6.4.1,说明npm是存在的。
3. 使用npm下载一些必用的安装包
- 安装react官网提供的一个快速搭建项目的脚手架 create-react-app
npm install -g create-react-app
如下,安装成功
2. 切换到桌面Desktop目录下,创建一个名为myapp的项目
cd Desktop
create-react-app myapp
创建项目过程中需要一点时间
成功后如下:
4. 到这里,一个简单的react项目基本上就创建完毕了。
启动项目,浏览器中会自动打开项目
cd Desktop
npm start
成功如下:
- 到上面第4步,整个项目基本搭建完成。但是打开项目目录后,发现这里一些与webpack相关的东西被隐藏掉了
- 如果需要显示隐藏的webpack包文件,这里键入如下命令:
npm run eject
输入 y:
成功如下:
目录下多了config和scripts文件夹
8. 在React开发中,ant design是必不可少的,现在可以安装一下ant design。
可以使用 npm install antd --save 或者是 yarn add antd 来在项目中引用antd
npm install antd --save
9. 安装完antd后,需要安装一个依赖包来按需引入antd模块
npm install babel-plugin-import --save-dev
antd安装完成
10. 直接引用antd模块即可,如下图
安装过程中出现的问题及解决方案
create-react-app myapp 时出现错误如下:
解决方法如下:
1、npm install --registry=https://registry.npm.taobao.org --loglevel=silly 虽然不知道是什么意思,但是亲测对解决问题确实有效
2、npm cache clean --force 强制清除缓存,要是怕清不干净可以多清几次
3、create-react-app myapp 再进行创建就成功