首页 > mi_shop_web (1) | 前端环境搭建
头像
码农三少
发布于 2021-08-21 23:31
+ 关注

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

出现下图,说明成功:
使用 create-react-app脚手架 初始化

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 配置文件。
改动如下:
修改webpack配置文件

修改webpack配置文件

2.4)但此时报错,原因是 less-loader版本过高

2.5)我们需 降级less-loader版本
如输入:

yarn add less-loader@7.3.0

此时 yarn.lock 如下图,则为成功:
降级less-loader版本

参考:

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

全部评论

(0) 回帖
加载中...
话题 回帖

相关热帖

近期热帖

近期精华帖

热门推荐