Vue3 整合Element Plus

一、创建Vue3 项目

使用Vite 创建项目

（1）执行 npm create vite@latest 命令

如果出现这个情况则直接输入y（这一步不一定存在），如下图

然后直接按回车键，得到下图：

输入项目的名称，再按回车键

通过上下键选择相应的framework，这里选择Vue，按回车键

后面都是跟上面一样，通过上下键选择相应的选项，然后按回车即可

出现下图，则说明项目创建成功了

按照提示，一步一步执行命令

命令执行完后，说明项目已经启动成功了，可直接再浏览器中访问图中的 http://localhost:5173/

二、整合Element Plus

官网：https://element-plus.org/zh-CN/

（1）安装

npm install element-plus --save

或

pnpm install element-plus

（2）按需导入

① 安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

②修改vite.config.js，修改后代码如下

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

修改前的代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

（3）校验是否整合成功

① 修改App.vue 文件

修改前代码：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

修改后的代码：

<script setup>

</script>

<template>
  <el-button type="primary">按钮</el-button>
</template>

<style scoped>

</style>

（4）运行结果 

整合前运行结果

 

整合后运行结果：