create-react-app 搭建项目踩坑记录

中文说明

搭建前端开发环境笔记

npx create-react-app articles_published_system创建的项目

后来漏掉了typescript支持,原本可以由命令npx create-react-app articles_published_system --template typescript可以直接创建支持ts的应用

后续要将ts添加到已有项目中,用以下命令:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

项目中配置sass:

  1. 执行yarn add node-sass下载包(按理说执行npm install node-sass --save也应该有用,但是我这边报错了)。

    报错如下:

    npm安装sass报错

    我的vscode和node版本都是最新的

    建议大家用yarn来安装项目

    发现启动后sass会报错

    解决办法:sass指定版本为^1.43.5,postcss-pxtorem为^5.1.1,不要安装node-sass了

    前端生态配置仍然复杂

  2. 将样式文件后缀改为.scss并在tsx或者js文件中引入,项目会自动编译。

为了实现自适应,给项目配置postcss-pxtorem

  1. 执行yarn add lib-flexible postcss-pxtorem

  2. 在应用入口引入import 'lib-flexible'

  3. 执行npm run eject可以打开create-react-app应用的配置文件

  4. config/webpack.config.js文件中配置postcss,位置及方法如下图:

引入postcss

配置postcss

UI库使用antdesign

  1. 安装antd,yarn add antd

  2. 在App.css 中导入样式@import '~antd/dist/antd.css',然后在组件中引入相应的ui组件就可以用了。


完~


create-react-app 搭建项目踩坑记录
https://zouhualu.github.io/20211129/create-react-app-搭建项目踩坑记录/
作者
花鹿
发布于
2021年11月29日
许可协议