首页 前端知识 vue3 集成 Element-Plus之全局导入/按需导入

vue3 集成 Element-Plus之全局导入/按需导入

2024-03-24 22:03:11 前端知识 前端哥 618 433 我要收藏

element-plus集成

Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库:

  • 在Vue2中使用element-ui,而element-plus是element-ui针对于vue3开发的一个UI组件库;
  • 它的使用方式和很多其他的组件库是一样的,所以学会element-plus,其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的;
  • 移动端使用VantUI | MintUI
  • 安装element-plus
npm install element-plus
1. 全局引入

一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:

//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. 局部引入(按需引入)

也就是在开发中用到某个组件对某个组件进行引入:

2.1 手动引入
<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>

但是我们会发现是没有对应的样式的,引入样式有两种方式:

  • 全局引用样式;import 'element-plus/dist/index.css'
  • 局部引用样式(通过 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自动按需引入element-plus样式,
    plugins: [ElementPlus()]
  }
};

但是这里依然有个弊端:

  • 这些组件我们在多个页面或者组件中使用的时候,都需要导入并且在components中进行注册;
  • 所以我们可以将它们在全局注册一次;
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 自动导入组件以及样式[推荐】
1.安装插件:
npm install -D unplugin-vue-components unplugin-auto-import
2.配置vue.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 = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4087.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!