Vue3项目中引入 ElementUI

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

1.安装

vue3中使用如下命令通过 npm 安装 (本人项目使用安装方式

$ npm install element-plus --save

可以使用其他的包管理起进行安装

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2.引入

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

2.1 全局引入

全局引入就是在项目入口(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-componentsunplugin-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()],
    }),
  ],
}

若篇日志再vue.config.js中,导入方法相同:

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组件

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

效果如下

在这里插入图片描述

此外ElementUI中还有其他组件基本能满足开发需求,提升开发效率,详情请见官网ElementUI

注:在vue3中,由于vite打包拥有良好的性能本文使用的示例vite打包方式,同时建议使用其他包最新支持版本进行开发。

原文地址:https://blog.csdn.net/m0_46309087/article/details/131277139

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_19511.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注