vuecli3引入Element-plus

  element-ui是vuecli2版本，与vuecli3版本不兼容，故vuecli3则是使用element-plus。想要将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插件可以自动根据代码上下文来确定导入哪些模块，比如函数、常量等，而不需要额外的配置。
• 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>