Vite+Ts 引入组件的方式汇总-自动引入、绝对路径、相对路径

这篇笔记主要记录项目引入组件的方式

1. 自动引入
2. 使用绝对路径
   • 完整绝对路径
   • 使用路径别名
3. 使用相对路径

自动引入

需要用到unplugin-vue-components,安装试试看pnpm i -D unplugin-vue-components

  "devDependencies": {
    "unplugin-vue-components": "^0.27.2",
  }

然后在vite.config.ts引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Components()],
})

就可以不需要手动引入，自动加载

使用绝对路径方式引入

使用绝对路径方式引入分为2种，完整绝对路径和使用别名; 项目目录结构，src/components下面有3个文件，

project-root/
├── src/
│   ├── components/
│   │   ├── hi.vue
│   │   ├── test.vue
│   │   └── map/
│   │       └── index.vue
│   ├── router/
│   │   └── index.js (or index.ts for TypeScript)
│   └── App.vue
├── index.html 
└── package.json

看一段代码

import { createRouter, createWebHistory } from 'vue-router'

const options = {
  history: createWebHistory(),
  routes: [
    {
      path: '/hi',
      name: 'hi',
      // 相对路径引入
      component: () => import('../components/hi.vue'),
    },
    {
      path: '/test',
      name: 'test',
      // 别名方式
      component: () => import('@/components/test.vue'),
    },
    {
      path: '/map',
      name: 'map',
      // 完整路径
      component: () => import('/src/components/map/index.vue'),
    },
  ],
}
const router = createRouter(options)
export default router

完整绝对路径方式

可以看到上面代码路径"/map", 是完整绝对路径方式引入的，由于项目的根目录是index.html所在的层级，所以是用过 /src/components/map/index.vue

可以看到TS提示Cannot find module '/src/components/map/index.vue' or its corresponding type declarations.. 我们要配置下tsconfig.json

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "/src/*": ["./*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

配置好了后，commond+p弹出执行命令窗口，执行Developer: Reload Window, ts警告就消失了

使用项目别名方式

使用项目别名方式，需要配置vite的alias,

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 9000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

同样的我们也需要配置 tsconfig.json, 不然ts会警告找不到模块，

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "/src/*": ["./*"],
      "@/*": ["./*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

增加了一个"@/*": ["./*"]， 如果不配置baseUrl, 可以这么写

{
  "compilerOptions": {
   "paths": {
      "@/*": ["./src/*"],
      "/src/*": ["./src/*"]
    },
  },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

使用相对路径

./表示当前目录，../表示父级目录，

我们看到路由文件父级目录--平级的components文件夹下有hi.vue, 就可以表示../components/hi.vue

验证下，使用绝对路径，相对路径都可以正常访问

彩蛋1 使用unplugin-auto-import 引入

像下面这种，不需要引入ref, 直接使用.

<script setup lang="ts">
const day = ref<string>('Tuesday')
</script>
<template>
  <h1 style="font-size: 100px">{{ day }}</h1>
</template>

安装pnpm i -D unplugin-auto-import,

 "devDependencies": {
    "@types/node": "^20.14.10",
    "@vitejs/plugin-vue": "^5.0.5",
    "naive-ui": "^2.38.2",
    "typescript": "^5.2.2",
    "unplugin-auto-import": "^0.17.6",
    "unplugin-vue-components": "^0.27.2",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components(),
    AutoImport({
      imports: [
        // presets
        'vue',
        'vue-router',
      ],
      dts: 'src/auto-imports.d.ts', // generate TypeScript declarations
    }),
  ],
  server: {
    port: 9000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

就可以了

彩蛋2 自动引入组件库

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver()],
    }),
    AutoImport({
      imports: [
        // presets
        'vue',
        'vue-router',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar',
          ],
        },
      ],

      dts: 'src/auto-imports.d.ts', // generate TypeScript declarations
    }),
  ],
  server: {
    port: 9000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

不用引入UI组件（并没有全局引入），自动加载

参考链接1

参考链接2