创建vue3 + vite项目，配置路径别名与自动导入

新建项目并初始化

npm create vite@latest vue3-test --template vue-ts

vue-test：自定义项目名称
vue-ts：vue + typescript

npm run dev 启动浏览器预览

配置路径别名（使用 @ 代替 src）

vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
const pathSrc=resolve(__dirname,"src")
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
        "@":pathSrc
          }
  }
})

tsconfig.json中配置

"compilerOptions": {
    "baseUrl": "./",//是否配置baseUrl
    "paths": {//是否配置paths
      "@/*": ["src/*"]
    }
  }

使用

import HelloWorld from '@/components/HelloWorld.vue'

安装自动导入

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件	安装	自动导入对象
unplugin-auto-import	npm install unplugin-auto-import --save-dev	ref，reactive,watch,computed 等API
unplugin-vue-components	npm install unplugin-vue-components --save-dev	Element Plus 等三方库和指定目录下的自定义组件

区别

unplugin-auto-import

使用前

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

使用后

<script setup lang="ts">
const count = ref(0)
</script>

unplugin-vue-components

使用前

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>

使用后

<script setup lang="ts">

</script>

vite.config.ts - 自动导入配置

新建 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
import Components from 'unplugin-vue-components/vite'
import AutoImport from "unplugin-auto-import/vite";
const pathSrc=resolve(__dirname,"src")
export default defineConfig({
  plugins: [
       vue(),
       Components({
           dts: resolve(pathSrc, "types", "components.d.ts"),
       }),  // 添加 unplugin-vue-components 插件
      AutoImport({
          // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
          imports: ["vue"],
          eslintrc: {
              enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
              filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
          },
          dts: resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
      })
     ],
  resolve:{
    alias:{
        "@":pathSrc
          }
  }
})

导入效果（运行项目 npm run dev 启动）