安装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文件:

安装react脚手架_第1张图片

安装react脚手架_第2张图片

代码:

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

你可能感兴趣的:(react)