unplugin-auto-import和unocss使用

最近用了大神antfu的2个项目，有些地方记录下，方便其他人遇到同样问题好解决
我的项目环境是：webpack + ts + vue3

unplugin-auto-import

安装： npm i -D unplugin-auto-import

配置：

1、vue.config.js 中加入下面代码
另外enabled: false，第一次需要改为true才会生成.eslintrc-auto-import.json，生成后在关闭，避免后续重复生成

const AutoImport = require('unplugin-auto-import/webpack')
configureWebpack: {
    plugins: [
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/ // .vue
        ],
        imports: ['vue', 'vue-router'],
        eslintrc: {
          enabled: false, // 若没此json文件，先开启，生成后在关闭
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true 'writeable')
        },
        resolvers: [
          /* ... */
        ],
        dts: './auto-imports.d.ts'
      }),
      UnoCSS({
        presets: [presetUno()]
      })
    ] 
  }

2、.eslintrc.js中加入继承的规则

module.exports = {
  /* ... */
  extends: [
    // ...
    './.eslintrc-auto-import.json',
  ],
}

3、tsconfig.json中加入dts
vscode才能找到识别导入

include中加入 "auto-imports.d.ts"

unocss

unocss是没有核心包的，所有功能都通过预设提供。
preset-uno 是官方默认预设 ，它是个超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyon 等
unocss是按需导入，打包时没用到的自动摇树，不用担心体积

安装：

npm i -D unocss  //框架 
npm i -D @unocss/webpack  //webpack配置

配置：
vue.config.js 中加入下面代码

const UnoCSS = require('@unocss/webpack').default
const { presetUno } = require('unocss')
 configureWebpack: {
    plugins: [ 
      UnoCSS({
        presets: [presetUno()] //指定预设presetUno
      })
    ]
}