<p>目录<br /> Vue3项目中引入 ElementUI<br />         1.安装<br />         2.引入<br />                 2.1 全局引入<br />                 2.2 按需引入<br />                         vite<br />                         Webpack<br />         3.使用</p> 

Vue3项目中引入 ElementUI
ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，其包含了布局（layout)，容器（container）等各类组件，基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本，本文主要介绍在vue3中如何引入使用ElementUI（vue3中升级为Element Plus）。

\( npm install element-plus --save<br /><br /> 也可以使用其他的包管理起进行安装&#xff1a;</p> <p># Yarn<br /> \) yarn add element-plus

# pnpm
$ pnpm install element-plus

2.引入
element-plus分为全局引入和按需引入两种方式，一般在工程项目中，由于全局引入会导致不必要的资源加载，为提升项目性能，建议进行按需引入。以下我们对两种引入方式进行介绍。

// main.ts
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’ //全局引入
import ‘element-plus/dist/index.css’
import App from ‘https://blog.csdn.net/weixin_/article/details/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配置中添加相应的配置，如下所示：

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

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.使用
引入完毕之后，我们可进行按需引入需要使用的组件，使用方法如下，引入input组件和button组件

&lt;template&gt;
  &lt;div&gt;
    &lt;el-input class=“input” v-model=“input” type=“file” placeholder=“Please input” /&gt;
    &lt;el-button class=“button” type=“primary”&gt;文件处理&lt;/el-button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import { ElButton, ElInput } from ’element-plus‘
  import { ref } from ’vue‘
  
  export default {
    components: { ElButton,ElInput },
  }

&lt;/script&gt;
&lt;style scoped&gt;
.input {
  display: inline;
  margin: 20px 30px;
}
.button {
  width: 90px;
}
&lt;/style&gt;

————————————————