vue3引入Element-plus

用户5815571442346
535 阅读3分钟

  element-ui是vuecli2版本，与vuecli3版本不兼容，故vuecli3则是使用element-plus。本文主要介绍vuecli3引入Element-plus的方法。

  • elementPLUS的官网,注意不要与elementUI官网搞混了！！！！被坑死了！！！elementPLUS和elementUI的部分组件名有区别。

一、下载安装element-plus依赖包到项目中去

npm i -D element-plus

二、导入（组件和组件样式）

1、全手动导入（不推荐：手动导入组件，手动导入组件样式）

（1）在组件中局部手动导入

<template>
	<div>
		<el-button @click="summit"><el-button>
	</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
const summit = () => {
	Elmessage.warning('warning')
}
</script>

（2）在main.js中导入和注册（注册是全局性的，局部导入没有这个概念）

  • 1.完整导入和注册   在vue的机制中，组件间是不能互相直接使用，需要导入组件及其样式。而使用app.use()就是将组件集合（插件）全部变成全局组件，在其他组件中可以直接使用，无需再导入。
import { createApp } from 'vue'

// 导入elemen-plus全部组件
import ElementPlus from 'element-plus'
// 导入element-plus全部组件样式
import 'element-plus/dist/index.css'

const app = createApp()
app.use(ElementPlus)
app.mount("#app")
  • 2.单一导入和注册
      与app.use()不同的是，使用app.component()是将单个组件变成全局组件，在其他组件中也可以直接使用。
import { createApp } from 'vue'

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

const app = createApp()
app.component(ElButton)
app.mount("#app")

  你会发现无论是（1）（2）还是（3），操作都很麻烦，当项目一大就会很混乱，所以不推荐这个方法。

2、半自动导入（推荐：手动导入和注册组件，自动导入组件样式）

  首先你需要安装unplugin-element-plus插件，帮助我们导入所需组件的样式。

npm install -D unplugin-element-plus

  补充： unplugin-element-plus插件的主要功能如下：

import { ElButton } from 'element-plus'
    ↓ ↓ ↓ ↓ ↓ ↓↓ ↓ ↓ ↓
import { ElButton } from 'element-plus' import 'element-plus/es/components/button/style/css'

  然后配置vue.config.js文件。

// 直接复制到vue.config.js中去就可以了
const { defineConfig } = require('@vue/cli-service')

const ElementPlus = require('unplugin-element-plus/webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
  	plugins: [
  		ElementPlus({
  			libs: [{
  				libraryName: 'element-plus',
                esModule: true,
                resolveStyle: (name) => {
                	return `element-plus/theme-chalk/${name}.css`
                }
  			}]
  		})
  	]
  }
})

  为了方便管理，将所需组件封装起来，再统一注册。在components文件下新建一个ElementPLUS.js文件。

import { 
	ElButton,
	ElTable,
	ElAlert,
	ElAside,
	ElAutocomplete,
	ElAvatar,
	ElBacktop,
	ElBadge
} from 'element-plus'

const cpns = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge
]

// 将组件结合暴露出去
export default cpn

  在main.js文件中注册组件（局部导入请参考上面）

import { createApp } from 'vue';
// 将封装起来的组件集合导入，并逐个注册成全局组件
import cpn from './components/ElementPLUS.js'
import router from './router'

const app = createApp(App),
app.use(router)
for (const c of cpn) {
	// vue使用component函数将单个组件变成全局组件，use函数将组件集合统一变成全局组件
	app.component(c.name, c)
}
app.mount('#app')

  当所需组件很多的时候，半自动导入的弊端就会暴露出来，就是麻烦。但是还是需要学一学这种方。

3、全自动导入组件和样式（推荐）

  首先在2的基础上，你还需要安装 unplugin-vue-components 和 unplugin-auto-import这两款插件

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

  • unplugin-auto-import插件可以自动根据代码上下文来确定导入哪些模块，比如函数、常量等，而不需要额外的配置。在此主要是自动按需导入Vue组件。
  • unplugin-vue-components插件在我的理解，就是自动将我们所需组件变成全局组件，即完成注册的功能。
  • 再加上unplugin-element-plus插件帮助我们导入所需组件的样式，三者相辅相成，让我们无需再显式地导入和注册组件及其样式。解放双手啦~~~
  • unplugin-vue-components 插件支持多种组件库，比如 Element Plus、Ant Design Vue 等，你可以根据需要引入相应的组件库，并通过配置选项来实现自定义。同时 unplugin-vue-components 也支持我们自定义的组件的自动导入，只需要我们把组件放到src/components（默认读取路径）文件夹中即可。（自定义组件路径或多个组件路径配置）在项目当中可能我们不一定会把组件放在src/components（默认读取路径）路径下，或者我们可能有多个放组件的地方，我们只需要在配置中添加dirs属性即可。

  然后要配置vue.config.js文件
  前方注意！！！！有坑，我踩过！！！而且是看了官网的指导下
  来看一下官网的配置方法

const ElementPlus = require('unplugin-element-plus/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
      	ElementPlus({
  			libs: [{
  				libraryName: 'element-plus',
                esModule: true,
                resolveStyle: (name) => {
                	return `element-plus/theme-chalk/${name}.css`
                }
  			}]
  		}),
  		AutoImport({
        	resolvers: [ElementPlusResolver()],
      	}),
      	Components({
        	resolvers: [ElementPlusResolver()],
      	})
  ],
}

  然后你复制到vue.config.js后运行，你会发现！！！！

在这里插入图片描述

  傻眼了之后查了资料又想了想，发现了问题，官网配置的webpack.config.js文件，但该文件在vuecli3中已经没了。想要在vuecli3中配置webpack，需要到vue.config.js文件中去。但是该文件下的参数没有plugins，而plugins是webpack下的，而vue.config.js提供了configurewebpack参数。

正确配置方法来了！！！

// 直接复制到vue.config.js中去就可以了
const { defineConfig } = require('@vue/cli-service')

const ElementPlus = require('unplugin-element-plus/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
  	plugins: [
  		ElementPlus({
  			libs: [{
  				libraryName: 'element-plus',
                esModule: true,
                resolveStyle: (name) => {
                	return `element-plus/theme-chalk/${name}.css`
                }
  			}]
  		}),
  		AutoImport({
        	resolvers: [ElementPlusResolver()],
      	}),
      	Components({
        	resolvers: [ElementPlusResolver()],
      	})
  	]
  }
})

  若全自动导入组件和样式，其实连下载安装element-plus依赖包到项目中去这一步操作都可以省去。只需要下载安装unplugin-vue-components unplugin-auto-import还有unplugin-element-plus这三个插件就可以了。

三、测试

  在App.vue中添加几个element-ui看是否成功

<template>
  	<el-button>Default</el-button>
    <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>
</template>
avatar
文章
阅读
粉丝