maxenui-import-resolver

English | 简体中文

maxenui-import-resolver 是 unplugin-vue-components 的一个解析器，用于实现 MaxenUI 按需引入。

特性

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

自动引入

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

安装插件

# npm
npm i maxenui-import-resolver unplugin-vue-components unplugin-auto-import -D

# yarn
yarn add maxenui-import-resolver unplugin-vue-components unplugin-auto-import -D

# pnpm
pnpm add maxenui-import-resolver unplugin-vue-components unplugin-auto-import -D

Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import autoImport from 'unplugin-auto-import/vite'
import { MaxenUIImportResolver } from 'maxenui-import-resolver'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [MaxenUIImportResolver()],
    }),
    autoImport({
      resolvers: [MaxenUIImportResolver({ autoImport: true })],
    }),
  ],
})

Vue CLI

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const { MaxenUIImportResolver } = require('maxenui-import-resolver')

module.exports = {
  configureWebpack: {
    plugins: [
      Components.default({
        resolvers: [MaxenUIImportResolver()],
      }),
      AutoImport.default({
        resolvers: [MaxenUIImportResolver({ autoImport: true })],
      }),
    ],
  },
}

Typescript 配置注意

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

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

手动引入

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

import App from './App.vue'
import { createApp } from 'vue'
import { Example } from 'maxen-ui'
import 'maxen-ui/es/example/style/index'

createApp(App).use(Example)

或

<script setup>
  import { Example as MaxenExample } from 'maxen-ui'
  import '@varlet/ui/es/Example/style/index'
</script>

<template>
  <MaxenExample>说你好</MaxenExample>
</template>

手动引入和自动引入对比

对比-手动引入

<script setup>
  import { Example as MaxenExample } from 'maxen-ui'
  import '@varlet/ui/es/example/style/index'

  function handleClick() {
    alert('你好!')
  }
</script>

<template>
  <MaxenExample @click="handleClick">说你好</MaxenExample>
</template>

对比-自动引入

<script setup>
  function handleClick() {
    alert('你好!')
  }
</script>

<template>
  <MaxenExample @click="handleClick">说你好</MaxenExample>
</template>