hbuilderX elementui
安装 HBuilderX 和 Element UI
HBuilderX 是 DCloud 推出的一款前端开发工具，支持 Vue.js 开发。Element UI 是一套基于 Vue.js 的桌面端组件库，常用于快速构建后台管理系统。
下载并安装 HBuilderX 最新版本，官方下载地址为 HBuilderX 官网。安装完成后，打开 HBuilderX，新建或导入一个 Vue 项目。
在 HBuilderX 项目中引入 Element UI
通过 npm 或 yarn 安装 Element UI。在项目根目录下打开终端，运行以下命令：
npm install element-ui --save
# 或
yarn add 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);使用 Element UI 组件
在 Vue 组件中直接使用 Element UI 提供的组件。例如，添加一个按钮和对话框：
<template>
<div>
<el-button type="primary" @click="openDialog">打开对话框</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一个对话框</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
openDialog() {
this.dialogVisible = true;
}
}
};
</script>配置按需引入（可选）
如果项目对体积敏感，可以配置按需引入以减少打包体积。安装 babel-plugin-component：
npm install babel-plugin-component --save-dev修改 babel.config.js 文件：
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};按需引入时，在组件中单独引入需要的组件：
import { Button, Dialog } from 'element-ui';
Vue.use(Button);
Vue.use(Dialog);主题定制（可选）
Element UI 支持主题定制。通过安装主题生成工具修改默认主题：
npm install element-theme -g
npm install element-theme-chalk -D初始化变量文件并编译主题：
et -i
et修改生成的 element-variables.scss 文件后重新编译，将输出的 theme 文件夹引入项目。
