node -v (10.15.0)
npm -v (6.4.1)
npm install -g cnpm --registry=https://registry.npm.taobao.org
优点:
1、国内服务器,速度更快
2、淘宝镜像,支持使用“本地缓存”安装环境
cnpm i less -g
cnpm i node-sass -g
npm list -g --depth 0 (–depth 0 以简单方式)
cnpm install -g create-react-app
cnpm uninstall -g create-react-app // 卸载安装的包
create-react-app kdlzx
cd kdlzx
npm start
1、解包脚手架
npm run eject 或者 yarn eject
解包之后, 先尝试启动项目, 如果发现类似报错 Cannot find module ‘@babel/plugin-transform-react-jsx’
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
在src/assets/styles/ 目录下新建core.less,别写测试代码:
@charset 'utf-8';
@color: #f00;
body{
background: @color;
}
在src/index.js 中引入全局样式:
import './assets/styles/core.less'
启动项目 npm start