Vue3开发时实用的几个库

一、API 自动导入
setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。

// 安装命令
npm i unplugin-auto-import -D --save

// 配置vite.config.js
import { defineConfig } from 'vite'
 
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
  plugins: [
    AutoImport({
       // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      dts: 'src/auto-imports.d.ts',  // 使用ts才需要加上这个，不用ts可以注释
      imports: ['vue']
    })
  ]
})

二、告别.value（实验阶段，生产环境不推荐使用）
setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true // 开启ref转换
    })
  ]
})


// test.vue 开启ref转换后 在ref前添加$
let count = $ref(1)
const addCount = () => {
  count++
}

三、自动导入图片（慎用，暂不推荐）

// 安装
npm i vite-plugin-vue-images -D --save

四、忽略.vue后缀

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

五、Vite按需引入自定义组件

// 安装命令
yarn add unplugin-vue-components -D

// vite.config.js
import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), // https://github.com/antfu/unplugin-vue-components
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ["vue", "md"],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: "src/components.d.ts",
    })
  ],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
    extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
});