一、自动导入vue vue-router pinia

1、安装unplugin-auto-import

npm install unplugin-auto-import -D

2、引入

import AutoImport from 'unplugin-auto-import/vite';

3、配置vite.config.ts

plugins: [
  vue(),
  vueDevTools(),
  AutoImport({
    include: [
      /\.[tj]sx?$/, // ts, .tsx, .js, .jsx
      /\.vue$/,
      /\.vue\?vue/, // .vue
      /\.md$/ // .md
    ],
    imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue、vue-router、pinia 内的部分api

 dts: 'src/types/auto-import.d.ts', // 自定义文件存放的目录

  })
],

  配置好后会帮我们自动在根目录下生成一个 auto-imports.d.ts 文件 

修改根目录下的 tsconfig.app.json 文件,在 include 里面新增 "auto-imports.d.ts"。

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

二、自动引入组件

1、安装 unplugin-vue-components 

npm install unplugin-vue-components -D

2、引入

import Components from 'unplugin-vue-components/vite'

3、配置

plugins: [
  vue(),
  vueDevTools(),
  Components({
    // 自动加载组件的目录配置,默认的为 'src/components'
    dirs: ['src/components'],
    extensions: ['vue'] // 组件的有效文件扩展名
  }),
],

 会在根目录自动生成components.d.ts文件

三、自动生成路由

1、安装

npm install vite-plugin-pages -D

2、 引入

import Pages from 'vite-plugin-pages'

3、配置

plugins: [
  vue(),
  vueDevTools(),
  Pages()
],

4、修改router/index.ts

注意： 生成的文件名和路由是相对应的

四、按需加载antd

1、安装

npm install ant-design-vue@next --save

npm install unplugin-vue-components -D

 2、使用

// vite.comfig.ts
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        // ...
        Components({
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false, // css in js
                }),
            ],
        }),
    ],
});

五、按需加载element-plus

1、安装

npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

2、使用

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

六、完整的基础配置

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'
import Pages from 'vite-plugin-pages'
import {AntDesignVueResolver, ElementPlusResolver} from 'unplugin-vue-components/resolvers';
// https://vite.dev/config/
export default defineConfig((c) => {
    console.log('********', c)
    console.log(import.meta.url)
    return {
        plugins: [
            vue(),
            vueDevTools(),
            AutoImport({
                include: [
                    /\.[tj]sx?$/, // ts, .tsx, .js, .jsx
                    /\.vue$/,
                    /\.vue\?vue/, // .vue
                    /\.md$/ // .md
                ],
                imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue、vue-router、pinia 内的部分api
                dts: 'src/types/auto-import.d.ts', // 自定义文件存放的目录
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                // 自动加载组件的目录配置,默认的为 'src/components'
                dirs: ['src/components'],
                dts: 'src/types/components.d.ts', // 自定义文件存放的目录
                extensions: ['vue'], // 组件的有效文件扩展名
                resolvers: [ElementPlusResolver(),
                    AntDesignVueResolver({
                        importStyle: false, // css in js
                    })
                ],
            }),
            Pages(),
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            },
        },
        server: {
            open: true, // 自动打开到浏览器
            port: 8080, // 修改默认启动端口
            proxy: {
                // 配置代理服务
                '/api': {
                    target: 'http://jsonplaceholder.typicode.com',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            }
        },
        build: {
            sourcemap: true // 生成 sourcemap 文件
            // 发布时去除 console
            // terserOptions: {
            //   compress: {
            //     drop_console: true
            //   }
            // },
            // minify: 'terser',
        },
    }
})