安装react脚手架

一、安装Node环境

1.1、安装nodeJs.exe

node -v (10.15.0)

npm -v (6.4.1)

1.2、安装淘宝镜像

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

优点：

1、国内服务器，速度更快

2、淘宝镜像，支持使用“本地缓存”安装环境

1.3、安装less

cnpm i less -g

1.4、安装scss

cnpm i node-sass -g

1.5、查看安装过的全局包

npm list -g --depth 0 （–depth 0 以简单方式）

二、项目库环境——create-react-app脚手架安装

2.1、安装官方脚手架（用来项目搭建）

cnpm install -g create-react-app

cnpm uninstall -g create-react-app // 卸载安装的包

2.2、在项目目录创建工程

create-react-app kdlzx

2.3、进入安装目录

cd kdlzx

2.4、启动项目查看内容

npm start

三、项目集成less

1、解包脚手架

​ npm run eject 或者 yarn eject

解包之后, 先尝试启动项目, 如果发现类似报错 Cannot find module ‘@babel/plugin-transform-react-jsx’

1. 删除项目下node_modules文件夹
2. yarn add start （重新下载node_modules）
3. yarn start

2、安装less环境:

​ 1）（！！已经安装了yarn的就跳过这一步）安装React团队提供yarn包管理工具

​ D:\react\kdlzx>cnpm i yarn -g

​ 2） 安装less环境

​ D:\react\kdlzx>yarn add less less-loader -D

3、把less加载器配置到webpack配置文件中

在config文件夹中的webpack.config.js文件：

代码：

const lessModuleRegex = /\.less$/;

			// less加载器 
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  //暂不配置
                },
                'less-loader'
              ),
            },

四、准备项目目录结构

进入项目文件夹：

1、src目录下，只保留index.js文件，其他全部删除

2、新建assets文件夹 (存放静态资源)，并在其中新建fonts/styles/images等目录

3、新建components文件夹 (存放组件代码)

4、新建pages文件夹 (存放页面代码)

5、在pages文件夹新建App.js文件

6、在App.js中 rcc 触发组件代码， 复制index.js中的ReactDOM.render(, document.getElementById(‘root’)); 到App.js的最后

7、在App.js中补充 import ReactDOM from ‘react-dom’

8、在index.js中，引入App：

//入口文件，就像一个清单一样

//引入顶级组件
import './pages/App'

//引入全局样式

9、启动项目 npm start/yarn start

五、测试less：

在src/assets/styles/ 目录下新建core.less，别写测试代码：

@charset 'utf-8';

@color: #f00;

body{
    background: @color;
}

在src/index.js 中引入全局样式：

import './assets/styles/core.less'

启动项目 npm start