vue使用Element-plus

六月Bing

于 2021-12-28 15:12:10 发布

阅读量991

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wang9820/article/details/122192718

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-plus，包括两种引入方式：完整引入和按需导入。推荐使用自动导入，需要先安装unplugin-vue-components和unplugin-auto-import，然后配置vue.config.ts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用法

1.下载资源文件

npm install element-plus --save

2.引入

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

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

按需导入

您需要使用额外的插件来导入要使用的组件。

自动导入推荐

First you need install unplugin-vue-components and unplugin-auto-import.

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

Then add the code below into your Vite or Webpack config file.

vue.config.ts

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

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}