Vue3+element-plus 搭建教程整理

一、创建Vue3 项目

安装 vue/cli，使用命令创建项目：

 vue create  helloworld

常用操作：

创建项目： vue create  helloworld

运行项目： npm run serve

编译项目：npm  run build

更多参考旧版本：VSCode 搭建Vue开发环境之Vue CLI - 天马3798的个人空间 - OSCHINA - 中文开源技术交流社区

二、安装vue-router

vue  add router

三、安装element-plus 最新版本

当前版本2.0.4

npm install element-plus@2.0.4

四、安装 icon组件库

npm install @element-plus/icons-vue

编辑main.js ，然后启动项目：

element-plus、icon库都需要手动引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './plugins'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import './assets/site.css'

import * as ElIconModules from '@element-plus/icons-vue'

var app = createApp(App);
app.use(router);
app.use(ElementPlus, {
    locale: zhCn
});

Object.keys(ElIconModules).forEach(function (key) {
    app.component(ElIconModules[key].name, ElIconModules[key])
  });
app.mount('#app');

更多：

vue3 element-plus 使用icon图标组件

​​​​​error Component name “xxx“ should always be multi-word vue/multi-word-comp

Vue2和Vue3的区别_Vue3和Vue2的区别