xianii/tecnico.cc-4-新的开发框架

Created Mon, 08 Nov 2021 00:00:00 +0000 Modified Mon, 08 Nov 2021 19:21:56 +0000
645 Words

icon

  1. 绘制192x192图标
  2. 通过 https://www.favicon-generator.org/ 生成favicon资源包。
  3. 如果需要包含更多分辨率的favicon.ico，可以使用 https://redketchup.io/icon-converter 生成

yarn

全局安装yarn包管理器

npm install -g yarn

vite

前端开发与构建工具

新建项目引入

yarn create vite

或者参考官方文档。

在当前项目引入

  • yarn add vite vite-plugin-checker @vitejs/plugin-react --dev
  • 将index.html移动到根目录，因为vite路径处理方式的不同，%PUBLIC_URL%也不需使用了
  • package.json中，修改scripts："dev": "vite"、"build": "vite build"、"serve": "vite preview"

prettier

使用prettier来进行代码格式化。

yarn add prettier --dev

在根目录建立.prettierrc.json进行配置。或者参照官方文档。

package.json中，修改scripts：添加"format": "prettier --write src"、"predev": "yarn format"

这样，在运行yarn dev时，会自动先运行一次格式化。

windicss

原本想使用tailwindcss这个前端框架，因为体积原因，又不想引入整个臃肿的tailwind.css，于是我找到了windicss这个项目，完全兼容tailwindcss特性，并且可以按需生成使用到的css

yarn add vite-plugin-windicss windicss --dev

然后，在vite.config.js中，添加插件：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在入口jsx文件中，引入import 'virtual:windi.css'即可。

Material-UI

一个 React UI 框架

yarn add @material-ui/core@next @emotion/react @emotion/styled