零 前言

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