vue全局导入和按需导入Element-puls

最新推荐文章于 2024-09-18 22:30:24 发布

Bunury

最新推荐文章于 2024-09-18 22:30:24 发布

阅读量749

点赞数 9

分类专栏： Element-plus 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136649024

版权

Element-plus 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue3项目中使用ElementPlus框架，包括全局导入的体积优化、按需导入的推荐方式、Unplugin插件的配置以及组件的自动注册。

摘要由CSDN通过智能技术生成

官方文档： 一个 Vue 3 UI 框架 | Element Plus

安装

$ pnpm add element-plus

全局导入(体积大）

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

// 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')

按需导入(推荐使用)

1.安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

2. 然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

3.main.js中挂载样式

import 'element-plus/dist/index.css'

4.直接使用

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    ...
  </div>
</template>