如何从零开始在 Vue 3 项目中引入 Element Plus

如果想在 Vite 生成的 Vue 3 下项目中，从头开始使用 Element Plus UI 库，并成功展示到页面，可以按照如下步骤操作：

1. 创建 Vue 3 项目（如果还没有）

使用 vite 创建

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

2. 安装 Element Plus

网上有很多不一样的安装命令，如果不成功的话，可以试试这个。

npm install element-plus

 3. 配置 Element Plus

在 main.js 中引入 Element Plus 和样式，并将其注册到 Vue 应用中：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4. 使用组件 

现在就可以成功使用 Element Plus 的组件，举个简单的 🌰，使用 ElButton 按钮组件。

<template>
  <div class="container">
    <!-- 两种写法都OK -->
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <ElButton type="info">Info</ElButton>
    <ElButton type="warning">Warning</ElButton>
    <ElButton type="danger">Danger</ElButton>
  </div>
</template>

5. 运行项目

最后运行项目，检查是否成功加载了 Element Plus 的组件。

npm run dev

打开浏览器访问 http://localhost:xxxx，可以看到如下样式：

总结：

通过上述步骤，可以成功使用 Element Plus UI 库，如果开发中遇到问题，可以检查控制台的错误信息或确保依赖和版本都安装正确。 

附上 Element Plus UI 库 链接：https://element-plus.org/zh-CN/component/overview.html