Vite相关知识点

一、自动导入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 内的部分apidts: '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',},}
})