快速生成react项目
2016-12-27 14:07
134 查看
一、安装最新的node.js
原博文是这样写说的npm install -g n //首先安装n模块
n stable //升级Node.js到最新稳定版
n 5.0.0 //或者指定版本升级
node -v //检查更新是否成功
我自己是去重新下了一个最新版的node.js
二、修改npm源为淘宝源
npm config set registry “https://registry.npm.taobao.org”加快npm下载速度,不这样做的话npm install会卡很久。
三、安装脚手架
首先确保自己安装了nodejs,然后全局安装yeoman npm install -g yo 然后直接安装脚手架 npm install -g generator-reactpackage1
2
3
4
5
6
1
2
3
4
5
6
四、创建React项目
在合适的地方新建一个文件夹,在文件夹下运行: yo reactpackage1
2
1
2
然后就会在此目录下生成以下目录结构: ├── data │ └── test.json ├── src │ ├── components │ │ └── App.js │ ├── images │ │ └── yeoman.png │ ├── styles │ │ └── app.scss │ ├── vendor │ │ └── jquery.js │ ├── views │ │ └── home.html ├── node_modules ├── index.html ├── package.json └── webpack.config.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
五、调试打包React项目
然后使用以下命令: npm run dev //项目开发过程使用,启动服务,实时刷新 npm run build //开发完成之后打包文件(js、css分开打包)1
2
3
1
2
3
六、测试预览项目
本项目默认监听端口是8888,所以在浏览器输入 http://localhost:8888,或者index.html->右键打开方式->chrome 就能看到效果了 如果执行上述命令提示错误:Error: getaddrinfo ENOTFOUND localhost,在host文件里面添加127.0.0.1 localhost即可 监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置
相关文章推荐
- 如何利用NB代码生成工具和NBear框架,快速开发WEB项目
- 如何利用NB代码生成工具和NBear框架,快速开发WEB项目
- 开发利器_Pigar.快速为Python项目生成依赖文件requirements.txt?
- 用Adobe Acrobat DC快速生成合同模板、itext导出pdf,解决项目中合同问题
- React + webpack 快速搭建项目
- 代码生成器模式下的快速项目实施(生成的代码服务部分)
- 使用 Hbuild 快速构建生成现代化前端项目
- 如何使用Maven的archetype快速生成一个新项目(解决生成项目目录不完整问题)
- 如何使用Maven的archetype快速生成一个新项目
- Create React App快速创建React项目
- Eclipse+Maven快速生成Web项目,解决部署时Maven lib依赖问题
- Eclipse+Maven快速生成Web项目,解决部署时Maven lib依赖问题
- yii gii快速生成项目
- Android-使用JitPack快速生成GitHub项目依赖地址
- 如何在github上展示作品——为你的项目生成一个快速访问的网址如(DaisyWang88.github.io)
- 如何利用NB代码生成工具和NBear框架,快速开发WEB项目
- Eclipse+Maven快速生成Web项目,解决部署时Maven lib依赖问题
- AndroidStudio快速入门三:aar和jar 生成和导入项目
- react项目快速开始
- react---学习笔记:使用create-react-app快速构建开发环境并创建项目