1、pnpm ⭐⭐⭐

• 替代npm和yarn的包管理工具
• 使用硬链接取代直接下载文件

  npm i -g pnpm #全局安装
  • 官网：https://pnpm.io/zh/

2、自动引入和导入⭐⭐

• 自动导入组件：https://github.com/antfu/unplugin-vue-components
  • 安装：pnpm i -D unplugin-vue-components
  • vue组件放在项目src/components下就可以自动导入，也可以在vite.config.js中自定义路径
• 自动引入：https://github.com/antfu/unplugin-auto-import
  • 安装：pnpm i -D unplugin-auto-import
  • 自动引入vue和其它一些框架的api

3、基于文件的路由自动生成

文件即路由：vite-plugin-pages

• https://github.com/hannoeru/vite-plugin-pages
  • 安装：pnpm install -D vite-plugin-pages
  • src/pages下的文件将被自动当作路由路径

布局layout：vite-plugin-vue-layouts

• https://github.com/JohnCampionJr/vite-plugin-vue-layouts
  • 安装：pnpm install -D vite-plugin-vue-layouts
  • 与vite-plugin-pages配合使用

4、CSS框架

Windi CSS：vite-plugin-windicss

• 官方文档：https://cn.windicss.org/guide/
  • 安装：npm i -D vite-plugin-windicss windicss
  • VSCode智能提示插件：WindiCSS IntelliSense

5、其它

• 别名配置alias: vite-aliases

  • vite-aliases - npm (npmjs.com)

  • 图标库⭐⭐

  • Iconify库允许你使用任何图标库的图标：https://docs.iconify.design/icon-components/vue/

    #安装antfu/unplugin-icons
    pnpm i -D unplugin-icons
    #安装全部icons（120M），只有用到的icon才会被打包到最终项目
    # @iconify/json (~120MB) includes all the iconsets from Iconify so you can install once and use any of them as you want (only the icons you actually use will be bundle into the production build).
    pnpm i -D @iconify/json 
    # 或者只安装一种icon set
    pnpm i -D @iconify-json/mdi