element-ui是vuecli2版本,与vuecli3版本不兼容,故vuecli3则是使用element-plus。想要将element-plus引入到项目中去,有以下方法:


vuecli3引入Element-plus

  • 一、下载安装element-plus依赖包到项目中去
  • 二、导入(组件和组件样式)
  • 1、全手动导入(不推荐:手动导入组件,手动导入组件样式)
  • 2、半自动导入(推荐:手动导入组件,自动导入组件样式)
  • 3、全自动导入组件和样式(推荐)
  • 三、测试


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插件可以自动根据代码上下文来确定导入哪些模块,比如函数、常量等,而不需要额外的配置。
  • unplugin-vue-components插件在我的理解,就是可以根据需要自动导入Vue组件及其样式。
  • 再加上unplugin-element-plus插件帮助我们导入所需组件的样式,三者相辅相成,让我们无需再显式地导入和注册组件及其样式。解放双手啦~~~

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

  前方注意!!!!有坑,我踩过!!!而且是看了官网的指导下

  来看一下官网的配置方法

const ElementPlus = require('unplugin-element-plus/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
/*
{键名:值}是将对象解构,只有键名匹配才能解构,否则失败
unplugin-vue-components支持多种组件库,需要其中的ElementPlus组件库,所以将其解构,然后配置。
若需要Ant Design Vue,则
const { AntDesignVueResolver } = require('unplugin-vue-components/resolvers'),然后配置。
重申以下,不配置自动导入失效,因为无法检索到所需组件在哪个组件库中
*/
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(),
        		// AntDesignVueResolver()
        	],
      	}),
      	Components({
        	resolvers: [
        		// 需要ElementPus组件库,所以配置ElementPlus组件库
        		ElementPlusResolver(),
        		// AntDesignVueResolver()
        	],
      	})
  ],
}

  然后你复制到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')
/*
{键名:值}是将对象解构,只有键名匹配才能解构,否则失败
unplugin-vue-components支持多种组件库,需要其中的ElementPlus组件库,所以将其解构,然后配置。
若需要Ant Design Vue,则
const { AntDesignVueResolver } = require('unplugin-vue-components/resolvers'),然后配置。
重申以下,不配置自动导入失效,因为无法检索到所需组件在哪个组件库中
*/
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(),
        		// AntDesignVueResolver()
        	],
      	}),
      	Components({
        	resolvers: [
        		// 需要ElementPus组件库,所以配置ElementPlus组件库
        		ElementPlusResolver(),
        		// AntDesignVueResolver()
        	],
      	})
  	]
  }
})
  • 若全自动导入组件和样式,其实连下载element-plus安装包和unplugin-element-plus插件到项目中去这两步操作都可以省去。只需要下载安装unplugin-vue-components和unplugin-auto-import这两个插件就可以了。
  • (unplugin-vue-components和unplugin-element-plus)或者(unplugin-auto-import和unplugin-element-plus)这两个搭配在遇到el组件创建el组件时都会出错,只有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>