1.0 create-react安装

说明：使用环境

1、cnpm下载工具

2、create-react-app框架

3、Visual studio code编辑软件

 

一、查看node和npm的版本号

Microsoft Windows [版本 10.0.14393]
(c) 2016 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node -v
v8.11.4

C:\Users\Administrator>npm -v
5.6.0

C:\Users\Administrator>

 

node软件介绍

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 

  

npm install echarts-for-react --save

 

 

二、安装cnpm工具

npm install cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

 

一）提示如下错误：

PS F:\reactJs\pbx> npm install -g cnpm -registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.0.0
added 632 packages in 36.223s
PS F:\reactJs\pbx>

此错误为版本错误，需要单独安装错误的软件版本。

cnpm install cnpm@6.0.0

  

三、安装create-react-app

//注意，需要增加-g，不然会提示后续安装没有权限。

//全局安装脚手架

cnpm install -g create-react-app

 

//通过脚手架搭建项目todolist，安装在文件夹todolist里。

create-react-app todolist

 

四、Visual studio code安装插件

前端插件：js hacker

增加代码自动补全功能：

点击：

"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true

详细见1.4章节

 

 

 

五、Visual studio code汉化 插件

汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code

 

六、运行项目

    登陆到项目根目录下，输入：

cd 项目名称
npm start

 

提示：

   如果未在根目录下，系统会提示如下错误信息:

PS F:\reactJs\pbx> npm start
npm ERR! path F:\reactJs\pbx\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'F:\reactJs\pbx\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-10-24T13_33_15_642Z-debug.log
PS F:\reactJs\pbx> npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.