Vue 3项目如何安装Element-Plus

# 安装 Element-Plus 组件库
# 使用 npm 包管理器
$ npm install element-plus --save
# 使用 yarn 包管理器
$ yarn add element-plus
# 使用 pnpm 包管理器
$ pnpm install element-plus

# 引入 CSS 样式
$ npm run el-get-style

/* main.js 或 main.ts文件中 */
import 'element-plus/dist/index.css'  // 引入全局 CSS 样式

/* main.js 或 main.ts 文件中 */
import { createApp } from 'vue'
引入 Element-Plus 依赖
import ElementPlus from 'element-plus'
// 引入全局 CSS 样式
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
// 挂载 Element-Plus
app.use(ElementPlus)
app.mount('#app')

<!-- index.vue -->
<template>
    <div>
        <h1>This is a Home Page.</h1>
        <el-button type="primary">Click On</el-button>
    </div>
</template>
<script>
</script>
<style>
</style>

# 使用 npm 包管理器
$ npm install @element-plus/icons-vue
# 使用 yarn 包管理器
$ yarn add @element-plus/icons-vue
# 使用 pnpm 包管理器
$ pnpm install @element-plus/icons-vue

/* main.js 或 main.ts 文件中 */
import { createApp } from 'vue'
import '/@/style.css'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// 引入 ElementPlus 图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from '/@/App.vue'
import pinia from '/@/store'
import router from '/@/router'
const app = createApp(App)
// 注册 ElementPlus 图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(pinia)
// 挂载 路由器
app.use(router)
// 挂载 ElementPlus 组件库
app.use(ElementPlus)
app.mount('#app')

<!-- index.vue -->
<template>
    <div>
        <h1>This is a Home Page.</h1>
        <el-button type="primary">
            <!-- 如果直接使用SVG图标，则需要为它添加属性 -->
            <!-- 因为SVG图标默认不携带任何属性 -->
            <Edit style="width: 1em; height: 1em; margin-right: 8px" /> Click On
        </el-button>
    </div>
</template>
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
</script>
<style scoped>
</style>