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 文件夹引入项目。