mi_shop_web （1） | 前端环境搭建
零 前言
1 项目介绍（含背景、技术栈选型等）
一 前端
1 环境搭建（以Mac为例）
1）node + npm 环境
输入URL：http://nodejs.cn/download/ 。
点击相应的平台进行 node 安装包（如 macOS 安装包 ） 的下载。
安装过程一直点击 “下一步”、使用默认的配置 即可。
验证node 和 npm是否已完成安装：
node -v npm -v
出现下图，说明成功：
优化：设置淘宝镜像源
npm config set registry http://registry.npm.taobao.org
出现下图，说明成功：
2）create-react-app脚手架 + yarn（JS包管理工具）
// 同时安装 create-react-app、yarn， -g 表示全局安装、生效。 npm i -g create-react-app yarn
出现下图，说明成功：
2 初始化前端代码库
1） 使用 create-react-app脚手架 初始化
create-react-app mi_shop_ui
出现下图，说明成功：
2）优化：支持less
背景：
使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。
操作：
2.1）运行如下命令，暴露webpack配置文件：
npm run eject
2.2）通过yarn（或npm）安装less、less-loader
yarn add less less-loader
2.3）修改webpack配置文件
我们需修改 webpack.config.js 配置文件。
改动如下：
2.4）但此时报错，原因是 less-loader版本过高 。
2.5）我们需 降级less-loader版本 。
如输入：
yarn add less-loader@7.3.0
此时 yarn.lock 如下图，则为成功：
参考：
1）https://segmentfault.com/a/1190000021006547 2）https://blog.csdn.net/harry_yaya/article/details/108453744 3）https://juejin.cn/post/6844903761484185613
3 重启项目
1）输入：
yarn start
2）出现下图，说明成功：
3）新建GitHub代码库，把我们目前初始化好的前端代码库 推送至GitHub。
项目地址：
https://github.com/CYBYOB/mi_shop_web#项目##学习路径#