Vite 创建 Vue3 + TS 项目

创建项目

npm init vite@latest 项目名称

安装插件

npm i unplugin-auto-import -D
或者 
yarn add unplugin-auto-import -D

 修改vite.config.js的配置文件(Ts配置方法)

1): 将第二步中的代码 enable:false 运行项目

就会在src的同级中新建一个 types 目录

在types文件夹中生成一个文件 auto-imports.d.ts

2): 将第二步中 enable:true

最后再重新运行项目

将 vite.config.ts 的内容全部替换为

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入自动装配插件
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置自动装载配置
    AutoImport({
      // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件
      dts: 'types/auto-imports.d.ts',
      imports: ['vue', 'vue-router'],
      eslintrc: {
        // 默认false, true启用。生成一次就可以，
        // 避免每次工程启动都生成，
        // 一旦生成配置文件之后，最好把enable关掉，即改成false。
        // 否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        enabled: false,
        // 生成json文件,可以不配置该项，默认就是将生成在根目录
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true,
      },
    }),
  ]
})

将 tsconfig.json 内容全部替换为

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "types/auto-imports.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

将 vite-env.d.ts 内容全部替换为

/* eslint-disable */
declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

将 tsconfig.node.json 内容中 改为

"moduleResolution": "Node"