1.1 环境准备

1.1.1 安装vue-cli（第一次需要）

npm install -g @vue/cli

1.1.2 创建vue项目

vue create 项目名称(项目名称尽量不要使用中文)

1.1.3 选择相应的项目

1.1.4 启动项目

npm run serve

2.1 引入element-plus

2.1.1 安装

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

npm install element-plus --save

2.1.2 引入

2.1.2.1 完整引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')

2.1.2.2 按需引入

安装插件

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

配置

const { defineConfig } = require('@vue/cli-service')
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: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],}
})

main.ts啥也不用干

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'// createApp(App).use(router).use(ElementPlus).mount('#app')
createApp(App).use(router).mount('#app')

注意：有可能会报错

原因是版本不匹配，需要指定版本

npm install unplugin-auto-import@0.16.1 npm install unplugin-vue-components@0.25.2