uniapp vite+vue3+ts微信小程序项目 组合式Api自动导入

相信很多新手(博主也是菜鸡,不喜勿喷!),在公司都喜欢自己创建新的项目,搭建自己项目框架。都会遇到vue3组合式Api导入的问题而感到烦恼！这里教大家怎么简单的配置

---

1. 安装需要的插件unplugin-auto-import

在项目根目录运行：如下代码

npm install -D unplugin-auto-import

2. 安装成功后， 修改项目的tsconfig.json文件

     主要时在inclue里面末尾添加 "./auto-imports.d.ts"

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"]
  },
  "include": [
    "src/**/*.ts", 
    "src/**/*.d.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue", 
    "./auto-imports.d.ts"  // 添加的这里
  ]
}

3.  配置vite.config.ts文件(这一步是为了注册插件)

配置前

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";




export default defineConfig({
	plugins: [ 
		uni()
	],
});

配置后

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

import AutoImport from 'unplugin-auto-import/vite';   // 这里导入


export default defineConfig({
	plugins: [ 
		AutoImport({  
		  imports: ['vue'], // 指定要自动导入的库  
		  // 其他配置选项，如 transformers, eslintrc, dts 等  
		}),  
		uni()
	],
});

4. 关闭项目删除缓存, 重新运行即可

总之，虽然在没有配置 vite.config.ts 的情况下你可能已经实现了组合式 API 的自动导入，但为了确保项目的稳定性和未来的可维护性，建议在 vite.config.ts 中明确配置 unplugin-auto-import 插件。