快捷導(dǎo)航

Vue3項(xiàng)目中引入ElementUI并使用的示例詳解

更新時(shí)間：2023年06月19日 09:32:01 作者：Saga?Two

ElementUI是一個(gè)強(qiáng)大的PC端UI組件框架，它不依賴(lài)于vue，但是卻是當(dāng)前和vue配合做項(xiàng)目開(kāi)發(fā)的一個(gè)比較好的ui框架，本文主要介紹了如何在vue3中引入使用ElementUI，需要的可以參考一下

Vue3項(xiàng)目中引入 ElementUI

ElementUI是一個(gè)強(qiáng)大的PC端UI組件框架，它不依賴(lài)于vue，但是卻是當(dāng)前和vue配合做項(xiàng)目開(kāi)發(fā)的一個(gè)比較好的ui框架，其包含了布局（layout)，容器（container）等各類(lèi)組件，基本上能滿(mǎn)足日常網(wǎng)站的搭建開(kāi)發(fā)。針對(duì)vue2和vue3都有對(duì)應(yīng)的組件版本，本文主要介紹在vue3中如何引入使用ElementUI（vue3中升級(jí)為Element Plus）。

1.安裝

vue3中使用如下命令通過(guò) npm 安裝 ECharts（本人項(xiàng)目使用的安裝方式）

$ npm install element-plus --save

也可以使用其他的包管理起進(jìn)行安裝：

# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

2.引入

element-plus分為全局引入和按需引入兩種方式，一般在工程項(xiàng)目中，由于全局引入會(huì)導(dǎo)致不必要的資源加載，為提升項(xiàng)目性能，建議進(jìn)行按需引入。以下我們對(duì)兩種引入方式進(jìn)行介紹。

2.1 全局引入

全局引入就是在項(xiàng)目入口（main.ts）文件直接引入組件以及組件全部的樣式文件；代碼如下所示：

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

2.2 按需引入

在vue3中按需引入ElementUI，需要使用其他的插件輔助，需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件；安裝方法如下：

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

然后再vite或者webpack配置中添加相應(yīng)的配置，如下所示：

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()],
    }),
  ],
}

若篇日志再vue.config.js中，導(dǎo)入方法相同：

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
  	plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
  }
})

3.使用

引入完畢之后，我們可進(jìn)行按需引入需要使用的組件，使用方法如下，引入input組件和button組件

<template>
  <div>
    <el-input class="input" v-model="input" type="file" placeholder="Please input" />
    <el-button class="button" type="primary">文件處理</el-button>
  </div>
</template>
<script>
  import { ElButton, ElInput } from 'element-plus'
  import { ref } from 'vue'
  export default {
    components: { ElButton,ElInput },
  }
</script>
<style scoped>
.input {
  display: inline;
  margin: 20px 30px;
}
.button {
  width: 90px;
}
</style>

效果如下：