Vue3.3 + TS4,自主打造媲美 ElementPlus 的組件庫

download：www.it888.club

用法#
完整引入#
如果你對打包后的文件大小不是很在乎，那么使用完整導(dǎo)入會(huì)更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
Volar 支持#
如果您使用 Volar，請?jiān)?tsconfig.json 中通過 compilerOptions.type 指定全局組件類型。

// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
按需導(dǎo)入#
您需要使用額外的插件來導(dǎo)入要使用的組件。

自動(dòng)導(dǎo)入
推薦#
首先你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代碼插入到你的 Vite 或 Webpack 的配置文件中

Vite#
// vite.config.ts
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()],
}),
],
})
Webpack#
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
想了解更多打包 (Rollup, Vue CLI) 和配置工具，請參考 unplugin-vue-components 和 unplugin-auto-import。

Nuxt#
關(guān)于 Nuxt 用戶, 你只需要安裝 @element-plus/nuxt 即可.

npm install -D @element-plus/nuxt
然后將下面的代碼寫入你的配置文件.

// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})
配置文檔參考 docs.

手動(dòng)導(dǎo)入#
Element Plus 提供了基于 ES Module 的開箱即用的 Tree Shaking 功能。

但你需要安裝 unplugin-element-plus 來導(dǎo)入樣式。 配置文檔參考 docs.

App.vue

<template>
<el-button>我是 ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
// ...
plugins: [ElementPlus()],
})
WARNING

如果使用 unplugin-element-plus 并且只使用組件 API，你需要手動(dòng)導(dǎo)入樣式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
快捷搭建項(xiàng)目模板#
我們提供了 Vite 模板。

對于Nuxt 用戶，我們有一個(gè) Nuxt 模板。

對于 Laravel 用戶，我們也準(zhǔn)備了Laravel 模板。

全局配置#
在引入 ElementPlus 時(shí)，可以傳入一個(gè)包含 size 和 zIndex 屬性的全局配置對象。 size 用于設(shè)置表單組件的默認(rèn)尺寸，zIndex 用于設(shè)置彈出組件的層級(jí)，zIndex 的默認(rèn)值為 2000。

完整引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
按需引入:

<template>
<el-config-provider :size="size" :z-index="zIndex">
<app />
</el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
components: {
ElConfigProvider,
},
setup() {
return {
zIndex: 3000,
size: 'small',
}
},
})
</script>

本文使用 文章同步助手 同步