平平无奇一个学习总结记录贴
本文将介绍下面几个Vite插件(推荐node版本14+):
- 自定义组件自动引入 unplugin-vue-components
- element-plus 组件自动引入 unplugin-vue-components
- vue3等插件 hooks 自动引入 unplugin-auto-import/vite
1、unplugin-vue-components 自动导入组件
1. 1自动导入ui库,该插件内置了大多数流行库解析器
npm install unplugin-vue-components -D
这里使用 Element Plus、Ant Design Vue 、Vant 作为示例,想了解其他组件的可以前往参考官方
安装后将下面的代码添加到 Vite 或 Webpack 的配置文件。
Vite配置
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver,
VantResolver,
ElementUiResolver
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
Components({
// ui库解析器,也可以自定义
resolvers: [
ElementPlusResolver(),
AntDesignVueResolver(),
VantResolver()
]
})
]
})
Webpack配置
const components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver,AntDesignVueResolver,VantResolver } = require('unplugin-vue-components/resolvers')
module.exports =
plugins: [
Components({
resolvers: [
AntDesignVueResolver(),
ElementPlusResolver(),
VantResolver()
]
})
]
}
会自动生成components.d.ts文件,里面都是ui库组件
1.2 导入自定义组件
直接写组件名即可,插件会自动引入
1.3 插件的所有默认配置
// 插件的所有默认配置
Components({
// relative paths to the directory to search for components.
// 要搜索组件的目录的相对路径
dirs: ['src/components'],
// valid file extensions for components.
// 组件的有效文件扩展名。
extensions: ['vue'],
// search for subdirectories
// 搜索子目录
deep: true,
// resolvers for custom components
// 自定义组件的解析器
resolvers: [],
// generate `components.d.ts` global declarations,
// also accepts a path for custom filename
// 生成 `components.d.ts` 全局声明,
// 也接受自定义文件名的路径
dts: false,
// Allow subdirectories as namespace prefix for components.
// 允许子目录作为组件的命名空间前缀。
directoryAsNamespace: false,
// 忽略命名空间前缀的子目录路径
// 当`directoryAsNamespace: true` 时有效
// Subdirectory paths for ignoring namespace prefixes
// works when `directoryAsNamespace: true`
globalNamespaces: [],
// auto import for directives
// default: `true` for Vue 3, `false` for Vue 2
// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
// To install Babel, run: `npm install -D @babel/parser @babel/traverse`
// 自动导入指令
// 默认值:Vue 3 的`true`,Vue 2 的`false`
// 需要 Babel 来为 Vue 2 进行转换,出于性能考虑,它默认处于禁用状态。
directives: true,
// filters for transforming targets
include: [/.vue$/, /.vue?vue/],
exclude: [/[/]node_modules[/]/, /[/].git[/]/, /[/].nuxt[/]/],
})
2、unplugin-auto-import 自动导入vue3的hooks
安装
npm i -D unplugin-auto-import
使用效果
// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)
// 引入前
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
//引入后
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
Vite配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
// 可以选择auto-import.d.ts生成的位置,使用ts建议设置为'src/auto-import.d.ts'
// 默认为'src/auto-import.d.ts'
// dts: 'src/auto-import.d.ts'
})
]
})
安装的时候会自动生成auto-imports.d文件(默认是在根目录)
其他插件 vue-router, vue-i18n, @vueuse/head, @vueuse/core 等自动引入的自动引入请查看官方文档
// 插件的所有默认配置
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]']
]
}
],
// custom resolvers
// 可以在这自定义自己的东西,比如接口api的引入,工具函数等等
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
]
})
3、vite-plugin-style-import
当你使用unplugin-vue-components引入ui库的时候 message, notification 等引入样式不生效 安装vite-plugin-style-import即可
这里以一些常用的库为示例:
import { defineConfig } from 'vite'
import styleImport, {
AndDesignVueResolve,
VantResolve,
ElementPlusResolve,
NutuiResolve,
AntdResolve
} from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
styleImport({
resolves: [
AndDesignVueResolve(),
VantResolve(),
ElementPlusResolve(),
NutuiResolve(),
AntdResolve()
],
// 自定义规则
libs: [
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`
}
}
]
})
],
// 引用使用less的库要配置一下
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
}
})