Varlet Auto Import Resolver

English | 简体中文

@varlet/import-resolver 是 unplugin-vue-components 的一个解析器，用于实现 Varlet 按需引入。

特性

• 支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等
• 支持自动引入组件对应的 CSS 样式
• 支持 SSR（服务端渲染）

自动引入

通过插件 unplugin-vue-components 和 unplugin-auto-import 实现组件自动按需导入，这也是我们最推荐的方式。

安装插件

1# npm
2npm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D
3
4# yarn
5yarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D
6
7# pnpm
8pnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D

Vite

1// vite.config.js
2import vue from '@vitejs/plugin-vue'
3import components from 'unplugin-vue-components/vite'
4import autoImport from 'unplugin-auto-import/vite'
5import { VarletImportResolver } from '@varlet/import-resolver'
6import { defineConfig } from 'vite'
7
8export default defineConfig({
9  plugins: [
10    vue(),
11    components({
12      resolvers: [VarletImportResolver()]
13    }),
14    autoImport({
15      resolvers: [VarletImportResolver({ autoImport: true })]
16    })
17  ]
18})

Vue CLI

1// vue.config.js
2const Components = require('unplugin-vue-components/webpack')
3const AutoImport = require('unplugin-auto-import/webpack')
4const { VarletImportResolver } = require('@varlet/import-resolver')
5
6module.exports = {
7  configureWebpack: {
8    plugins: [
9      Components.default({
10        resolvers: [VarletImportResolver()]
11      }),
12      AutoImport.default({
13        resolvers: [VarletImportResolver({ autoImport: true })]
14      })
15    ]
16  }
17}

Typescript 配置注意

为了得到良好的 IDE 语法高亮，请确保上述两个插件生成的类型声明文件被 typescript 识别，可在 tsconfig.json 中进行如下配置:

1{
2  "include": ["auto-imports.d.ts", "components.d.ts"]
3}

手动引入

每一个组件都是一个 Vue插件，并由 组件逻辑 和 样式文件 组成，手动引入的使用方式如下。

1import App from './App.vue'
2import { createApp } from 'vue'
3import { Button } from '@varlet/ui'
4import '@varlet/ui/es/button/style/index'
5
6createApp(App).use(Button)

或

1<script setup>
2import { Button as VarButton } from '@varlet/ui'
3import '@varlet/ui/es/button/style/index'
4</script>
5
6<template>
7  <var-button>说你好</var-button>
8</template>

手动引入和自动引入对比

对比-手动引入

1<script setup>
2import { Button as VarButton, Snackbar } from '@varlet/ui'
3import '@varlet/ui/es/button/style/index'
4import '@varlet/ui/es/snackbar/style/index'
5
6function handleClick() {
7  Snackbar('你好!')
8}
9</script>
10
11<template>
12  <var-button @click="handleClick">说你好</var-button>
13</template>

对比-自动引入

1<script setup>
2function handleClick() {
3  Snackbar('你好!')
4}
5</script>
6
7<template>
8  <var-button @click="handleClick">说你好</var-button>
9</template>