如果想在 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