element-plus集成

Element Plus，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件庫(kù)：

• 在Vue2中使用element-ui，而element-plus是element-ui針對(duì)于vue3開發(fā)的一個(gè)UI組件庫(kù)；
• 它的使用方式和很多其他的組件庫(kù)是一樣的，所以學(xué)會(huì)element-plus，其他類似于ant-design-vue、NaiveUI、VantUI都是差不多的；
• 移動(dòng)端使用VantUI | MintUI
• 安裝element-plus

npm install element-plus

1. 全局引入

一種引入element-plus的方式是全局引入，代表的含義是所有的組件和插件都會(huì)被自動(dòng)注冊(cè)：

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

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

2. 局部引入（按需引入）

也就是在開發(fā)中用到某個(gè)組件對(duì)某個(gè)組件進(jìn)行引入：

2.1 手動(dòng)引入

<template>
    <div id="app">
      <el-row class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
      </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'App',
  components: {
    ElButton
  }
})
</script>

<style lang="less">
</style>

但是我們會(huì)發(fā)現(xiàn)是沒(méi)有對(duì)應(yīng)的樣式的，引入樣式有兩種方式：

• 全局引用樣式；import 'element-plus/dist/index.css'
• 局部引用樣式（通過(guò) unplugin-element-plus 插件）；

1.安裝插件：

npm install  unplugin-element-plus  -D

2.配置vue.config.js

const ElementPlus= require('unplugin-element-plus/webpack');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自動(dòng)按需引入element-plus樣式，
    plugins: [ElementPlus()]
  }
};

但是這里依然有個(gè)弊端：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491196.html

• 這些組件我們?cè)诙鄠€(gè)頁(yè)面或者組件中使用的時(shí)候，都需要導(dǎo)入并且在components中進(jìn)行注冊(cè)；
• 所以我們可以將它們?cè)?strong>全局注冊(cè)一次；

import {
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
} from 'element-plus'

const app = createApp(App)

const components = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge
]

for (const cpn of components) {
  app.component(cpn.name, cpn)
}

2.3 自動(dòng)導(dǎo)入組件以及樣式[推薦】

1.安裝插件：

npm install -D unplugin-vue-components unplugin-auto-import

2.配置vue.config.js（其他配置方式看官網(wǎng)）

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自動(dòng)按需引入element-plus，
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
};

3 直接使用

<template>
    <div id="app">
      <el-row class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
      </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>

<style lang="less">
</style>

到了這里，關(guān)于vue3 集成 Element-Plus之全局導(dǎo)入/按需導(dǎo)入的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！