vue3+vite+ts自动引入api和组件

安装

cnpm install unplugin-auto-import unplugin-vue-components -d

配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 编辑器提示 path 模块找不到，可以cnpm i @types/node --dev 即可
// 自动导入composition api 和 生成全局typescript说明
import AutoImport from 'unplugin-auto-import/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// 自动按需导入组件和注册组件
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),AutoImport({
	    imports: [
			'vue',
			'vue-router',
			'pinia',
			{
				axios: [
					['default', 'axios']
				]
			}
		],
		// 解析器，例如element-plus的ElementPlusResolver
		resolvers: [ElementPlusResolver()],
		eslintrc: {
			enabled: true, 
			filepath: './.eslintrc-auto-import.json', 
			globalsPropValue: true,
		},
		dts: true
	}),
	Components({
		resolvers: [ElementPlusResolver()] // ElementPlus按需加载
	})
  ],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')    // 配置别名；将 @ 指向'src'目录
    }
  },

  server: {
    port: 3000,       // 设置服务启动的端口号；如果端口已经被使用，Vite 会自动尝试下一个可用的端口
    open: true,       // 服务启动后自动打开浏览器
    proxy: {          // 代理
      '/api': {
        target: '127.0.0.1:81',
        changeOrigin: true,
        rewrite: (path:any) => path.replace(/^\/api/, '')     // 注意代理地址的重写
      },
      // 可配置多个... 
    }
  }
})

使用方式

<template>
	<div>{{a}}</div>
	<button @click="change">change</button>
	<el-button type="primary">ssss</el-button>
</template>
 
<script setup lang="ts">
// import { ref } from 'vue' 不需要再引入了
	let a = ref('dddd')
	console.log(a)
	function change(){
		a.value = "wuhu~"
	}
</script>

修改ts-config

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","./auto-imports.d.ts"]