SJDocs

Appearance

vue自动导入用法vite.config.js ​

javascript
npm i unplugin-vue-components -D
npm i unplugin-auto-import -D
npm i vite-auto-import-resolvers -D

import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// 下面为自动导入
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { dirResolver, DirResolverHelper } from 'vite-auto-import-resolvers'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
   // 使vite能解析到vue文件
    vue(),
    // 该辅助插件也是必需的 👇
	DirResolverHelper(),
    // 自动引入
    AutoImport({
      imports:['vue','vue-router','pinia'],
      // dirResolver()之后 `src/composables` 下模块的默认导出将在项目中自动按需引入
      // dirResolver({target:'src/stores'})` src/stores` 下模块的默认导出将在项目中自动按需引入
      // 默认只导入  export default后面的接口
      resolvers: [ElementPlusResolver(),dirResolver(),dirResolver({target:'src/stores'})],
    }),
    // 自动注册
    Components({
      resolvers: [ElementPlusResolver()],//按需导入ElementPlus
    })
  ],
  //src 可以用@符号代替
  resolve: {
      alias: {
      '@': resolve(__dirname, './src')
      }
  },
})

Vue 的按需组件自动导入 ​

安装 ​

bash
npm i unplugin-vue-components -D

vite-plugin-components已重命名为unplugin-vue-components，请参阅迁移指南。

Vite

ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

element-plus

bash
npm install element-plus --save
js
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
 plugins: [Vue(),Components({
     resolvers:[ElementPlusResolver()]
 })]
})

Webpack

ts
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ }),
  ],
}

Vue CLI

ts
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}

用法 ​

像往常一样在模板中使用组件，它会按需导入组件，不再需要import和component registrationrequired 了！如果您异步注册父组件（或惰性路由），自动导入的组件将与其父组件一起进行代码拆分。

它会自动把这个

html
<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

进入这个

html
<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

注意 默认情况下，此插件将导入src/components路径中的组件。您可以使用该选项自定义它dirs。

TypeScript ​

为了获得对自动导入组件的 TypeScript 支持，Vue 3 有一个 PR扩展了全局组件的接口。目前，Volar已经支持这种用法。如果您使用的是 Volar，您可以按如下方式更改配置以获得支持。

ts
Components({
  dts: true, // enabled by default if `typescript` is installed
})

设置完成后，components.d.ts将生成一个并使用类型定义自动更新。随意将其提交到 git 或不提交。

确保你也添加components.d.ts到你的tsconfig.json下include。

按需自动导入 ​

按需自动导入 Vite、Webpack、Rspack、Rollup 和 esbuild 的 API。支持 TypeScript。由unplugin提供支持。

插件：unplugin-auto-import

正常代码

ts
import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

安装插件以后

ts
const count = ref(0)
const doubled = computed(() => count.value * 2)

正常代码

tsx
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

安装插件以后

tsx
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

安装 ​

bash
npm i -D unplugin-auto-import

Vite

ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

例: playground/

bash

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

Webpack

ts
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({ /* options */ }),
  ],
}

Vue CLI

ts
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
}

配置 ​

ts
AutoImport({
  // targets to transform
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
    // example type import
    {
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],
  // Enable auto import by filename for default module exports under directories
  defaultExportByFilename: false,

  // Auto import for module exports under directories
  // by default it only scan one level of modules under the directory
  dirs: [
    // './hooks',
    // './composables' // only root modules
    // './composables/**', // all nested modules
    // ...
  ],

  // Filepath to generate corresponding .d.ts file.
  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
  // Set `false` to disable.
  dts: './auto-imports.d.ts',

  // Auto import inside Vue template
  // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
  vueTemplate: false,

  // Custom resolvers, compatible with `unplugin-vue-components`
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],

  // Inject the imports at the end of other imports
  injectAtEnd: true,

  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
})

TypeScript ​

为了正确提示自动导入的API 的类型

  1. 启动options.dts以方便auto-imports.d.ts自动生成文件
  2. 确保auto-imports.d.ts不被排除在外tsconfig.json
ts
AutoImport({
  dts: true // or a custom path
})

推荐 ​

unplugin-auto-import 已经内置 dirs 选项，推荐优先使用

vite-auto-import-resolvers ​

unplugin-auto-import 的 vite resolvers，主要处理 vite 项目本身的 api 按需自动引入。

动机 🐇 ​

为了按需自动引入指定目录下模块的 api。

🦖

  1. 安装
shell
npm i vite-auto-import-resolvers unplugin-auto-import -D
  1. 配置插件
ts
// vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
	dirResolver,
	DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		// 该辅助插件也是必需的 👇
		DirResolverHelper(),
		AutoImports({
			imports: ['vue'],
			resolvers: [dirResolver()]
		})
	]
})
  1. 之后 src/composables 下模块的默认导出将在项目中自动按需引入

例如 👇

ts
// src/composables/foo.ts

export default 100
html
// src/App.vue
<script setup>
	console.log(foo) // 输出100，而且是按需自动引入的
</script>

<template> Hello World!! </template>

进阶 🦕 ​

强制前缀与后缀 ​

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
	dirResolver,
	DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		DirResolverHelper(),
		AutoImports({
			imports: ['vue'],
			resolvers: [
				dirResolver({ prefix: 'use' }), // 强制前缀为 use
				dirResolver({
					target: 'src/stores', // 目标目录，默认为 'src/composables'
					suffix: 'Store' // 强制后缀为 Store
				})
			]
		})
	]
})

于是

  • src/composables 下只有 use 开头的模块会被按需加载
  • src/stores 下只有 Store 结尾的模块会被按需加载

例如 👇

ts
// src/stores/counterStore.ts
const counter = ref(100)

export default () => {
	const inc = (v: number = 1) => (counter.value += v)
	return {
		inc,
		counter
	}
}
html
<script setup lang="ts">
	// 这将按需自动引入
	const n = counterStore()
</script>

<template>
	<div @click="n.inc()">{{n.counter}}</div>
</template>

包含与排除 ​

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
	dirResolver,
	DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		DirResolverHelper(),
		AutoImports({
			imports: ['vue'],
			resolvers: [
				dirResolver({
					prefix: 'use',
					include: ['foo'], // 即使 foo 模块不是以 use 开头也会被包含进来
					exclude: ['useBar'] // useBar 模块将始终被排除
				})
			]
		})
	]
})

规范路径 ​

通过 normalize 可以控制最终路径的生成

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
	dirResolver,
	DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		DirResolverHelper(),
		AutoImports({
			imports: ['vue'],
			resolvers: [
				dirResolver({
					normalize({ path, target, name }) {
						return path
					}
				})
			]
		})
	]
})

自动生成按需 api 预设 ​

在使用 unplugin-auto-imports 时，需要手动管理 imports 👇

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		Vue(),
		AutoImports({
			imports: ['vue', 'vue-router', 'pinia'] // 手动管理
		})
	]
})

但有时候你可能需要去变动一些依赖，例如将 pinia 换成 vuex，这时如果配置未更改就会发生错误。同时如果你设置了未安装的包，这将造成无谓的性能消耗。

所以你能这样 👇

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import { AutoGenerateImports } from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		AutoImports({
			imports: AutoGenerateImports() // 自动管理，只有对应的包有装时才会自动按需设置预设
		})
	]
})

默认支持列表 ​

include 属性

  • vue
  • pinia
  • vuex
  • vitest
  • vue-i18n
  • vue-router
  • @vueuse/core
  • @vueuse/head
  • @nuxtjs/composition-api
  • preact
  • quasar
  • react
  • react-router
  • react-router-dom
  • svelte
  • svelte/animate
  • svelte/easing
  • svelte/motion
  • svelte/store
  • svelte/transition
  • vitepress
  • vee-validate

手动排除 ​

当然你可以手动排除掉不想要的 👇

ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import { AutoGenerateImports } from 'vite-auto-import-resolvers'

export default defineConfig({
	plugins: [
		Vue(),
		AutoImports({
			imports: AutoGenerateImports({
				exclude: ['pinia'] // pinia 将始终被排除
			})
		})
	]
})

用心去做高质量的内容网站，欢迎 star ⭐ 让更多人发现

MIT License | 版权所有 © 2023-2024 SJDocs contributors