🐛修复(antd): 修复antd组件按需导入失败bug

.cz-config.js

@@ -22,7 +22,7 @@ module.exports = {
 		{ value: '⚡️性能', name: '性能:    提升性能' },
 		{ value: '✅测试', name: '测试:    添加一个测试' },
 		{ value: '🔧工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
-		{ value: '⏪回滚', name: '回滚:    代码回退' },
+		{ value: '⏪回滚', name: '回滚:    代码回退' }
 	],
 
 	// scope 类型（定义之后，可通过上下键选择）
@@ -36,11 +36,11 @@ module.exports = {
 		['auth', '对 auth 修改'],
 		['other', '其他修改'],
 		// 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
-		['custom', '以上都不是？我要自定义'],
+		['custom', '以上都不是？我要自定义']
 	].map(([value, description]) => {
 		return {
 			value,
-			name: `${value.padEnd(30)} (${description})`,
+			name: `${value.padEnd(30)} (${description})`
 		}
 	}),
 
@@ -76,7 +76,7 @@ module.exports = {
 			'填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
 		breaking: '列举非兼容性重大的变更（可选）：\n',
 		footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
-		confirmCommit: '确认提交？',
+		confirmCommit: '确认提交？'
 	},
 
 	// 设置只有 type 选择了 feat 或 fix，才询问 breaking message
@@ -87,7 +87,7 @@ module.exports = {
 
 	// subject 限制长度
 	subjectLimit: 100,
-	breaklineChar: '|', // 支持 body 和 footer
+	breaklineChar: '|' // 支持 body 和 footer
 	// footerPrefix : 'ISSUES CLOSED:'
 	// askForBreakingChangeFirst : true,
 }

.eslintrc-auto-import.json

@@ -288,6 +288,18 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "acceptHMRUpdate": true,
+    "createPinia": true,
+    "defineStore": true,
+    "getActivePinia": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
+    "storeToRefs": true
   }
 }

auto-import.d.ts

@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -19,6 +20,7 @@ declare global {
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
@@ -29,9 +31,11 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
@@ -44,6 +48,11 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -84,9 +93,12 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']

components.d.ts

@@ -7,9 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
     ECharts: typeof import('./src/components/echarts/ECharts.vue')['default']
+    LoginPage: typeof import('./src/views/login/LoginPage.vue')['default']
+    Photo: typeof import('./src/components/photo/photo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/svgIcon/SvgIcon.vue')['default']
+    Tip: typeof import('./src/components/tip/tip.vue')['default']
   }
 }

src/views/login/LoginPage.vue

@@ -14,6 +14,7 @@ export default defineComponent({
 		<h1>Login</h1>
 		<h2>测试页面，看到这个，那么项目就成功跑起来了</h2>
 		<img style="width: 300px; height: 200px" src="@/assets/images/wallhaven.jpg" />
+		<a-button type="primary" loading>Loading</a-button>
 	</div>
 </template>
 

tsconfig.json

@@ -42,7 +42,9 @@
 		"src/**/*.tsx",
 		"src/**/*.d.ts",
 		"src/**/*.vue",
-		"auto-import.d.ts"
+		"./auto-imports.d.ts",
+		"./components.d.ts",
+		"./.eslintrc-auto-import.json"
 	],
 	"references": [
 		{

vite.config.mts

@@ -57,6 +57,17 @@ export default defineConfig(({ mode, command }) => {
 		},
 		plugins: [
 			vue(),
+			AutoImport({
+				//安装两行后你会发现在组件中不用再导入ref，reactive等
+				imports: ['vue', 'vue-router','@vueuse/core','pinia'],
+				dts: 'auto-import.d.ts',
+				//ant-design-vue
+				resolvers: [AntDesignVueResolver()],
+				eslintrc: {
+					enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
+
+				}
+			}),
 			createHtmlPlugin({
 				minify: true,
 				/**
@@ -123,22 +134,13 @@ export default defineConfig(({ mode, command }) => {
 				targets: ['chrome 52'], // 需要兼容的目标列表
 				additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
 			}),
-			AutoImport({
-				//安装两行后你会发现在组件中不用再导入ref，reactive等
-				imports: ['vue', 'vue-router','@vueuse/core'],
-				dts: 'auto-import.d.ts',
-				//ant-design-vue
-				resolvers: [AntDesignVueResolver()],
-				eslintrc: {
-					enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
 
-				}
-			}),
 			Components({
+				dts: true,
 				// 指定自动导入的组件位置，默认是 src/components
-				dirs: ['src/components'],
+				dirs: ['src/components','src/views'],
 				//ant-design-vue
-				resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
+				resolvers: [AntDesignVueResolver({ importStyle: "less", resolveIcons: true })]
 			})
 		],
 		optimizeDeps: {