hbuilderX elementui
安装 Element UI 插件
在 HBuilderX 中使用 Element UI 需要先安装相关插件。打开 HBuilderX 插件市场，搜索 "Element UI"，选择官方或稳定的版本进行安装。安装完成后，重启 HBuilderX 使插件生效。
创建 Vue 项目
在 HBuilderX 中新建一个 Vue 项目，选择 Vue 2 或 Vue 3 模板。Element UI 主要支持 Vue 2，若使用 Vue 3 需选择 Element Plus。
引入 Element UI
在项目根目录下的 main.js 文件中引入 Element UI 及其样式文件：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)若使用 Vue 3 和 Element Plus，引入方式如下：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')使用 Element UI 组件
在 Vue 组件中直接使用 Element UI 提供的组件。例如，添加一个按钮：
<template>
<el-button type="primary">主要按钮</el-button>
</template>配置按需引入
若项目需要优化体积，可配置按需引入。安装 babel-plugin-component：
npm install babel-plugin-component -D修改 babel.config.js 文件：
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}主题定制
如需自定义主题，可使用 Element UI 的主题生成工具。安装主题生成工具：
npm i element-theme -g初始化变量文件：
et -i修改生成的 element-variables.scss 文件后编译主题：
et常见问题解决
若遇到样式未生效问题，检查是否正确引入 CSS 文件。组件未注册时确认是否调用了 Vue.use(ElementUI)。编译错误时检查依赖版本是否匹配。
文档参考
开发过程中可随时查阅 Element UI 官方文档获取最新组件用法和 API 说明。文档地址为 https://element.eleme.cn/。
