Vue3项目如何引入Element-plus组件

一、Element-Plus 简要介绍

详情见国内官方镜像中文说明文档

二、如何在Visual Studio Code中引入Element-Plus组件

1.创建Vue3项目

请事先确认本机已下载npm、vue、vue-cli，并达到指定版本。

（1）创建vue3项目

新建终端，并使终端打开至项目父文件夹下，在终端输入以下指令：

vue create [项目名称]

 (2)下载npm依赖

npm install

2、引入Element-PLus组件

(使用包管理器引入方式)

（1）、下载Element-plus组件

#从以下三种选择一种你喜欢的包管理引入方式
# NPM:
$ npm install element-plus --save

# Yarn:
$ yarn add element-plus

# pnpm:
$ pnpm install element-plus

（2）、引入

        a）完整导入，当你不在乎打包后的文件有多大时：

// 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')

        b）手动导入

                a.安装unplugin-element-plus插件来导入样式

npm i unplugin-element-plus -D

参考网站：Element-plus官方文档 

                b.手动在需要组件的页面导入

APP.vue部分如下所示

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

WARNING

如果使用 unplugin-element-plus 并且只使用组件 API，你需要手动导入样式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

参考网站：GitHub unplugin-element-plus官方中文说明文档Markdown文档