适用脚手架搭建vue3项目

1.创建vue3框架

#1，下载node

#2，下载vue@cli

#3,  使vue create 项目名称进行手动选择

#4,  根据所需要的进行选择

# 5. 进行文件清理即可

2. 项目中使用elment-plus插件集成

#第一步：安装

npm install element-plus --save

#第二步：进行引入main.ts

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

#第三步: 下载icon图标

npm install @element-plus/icons-vue

#第四步：在main.ts中进行引入

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// import initIconfont from "./utils/getIcon";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import router from "./router";
import store from "./store";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
// initIconfont.initIcon(app);
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount("#app");

#直接在需要的地方使用即可不再需要二次引入

效果：