Element-UI 的快速入门指南

Element-UI 是一款为开发者提供丰富组件和功能的 Vue.js 2.0 基于框架的桌面端 UI 组件库。以下是 Element-UI 的快速入门指南。

1. 安装 Element-UI

使用 npm 安装

首先，确保你已经安装了 Node.js 和 npm。然后在你的项目目录下运行以下命令来安装 Element-UI：

npm install element-ui --save

使用 CDN

你也可以通过 CDN 引入 Element-UI，不需要安装。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element-UI Quick Start</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      template: '<el-button>Click Me</el-button>'
    });
  </script>
</body>
</html>

2. 引入 Element-UI

在 Vue 项目中引入

在你的 Vue 项目的入口文件（通常是 main.js）中引入 Element-UI 及其样式。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用按需加载

如果你不需要整个 Element-UI 库，可以使用按需加载以减小打包后的文件体积。你需要安装 babel-plugin-component 插件。

npm install babel-plugin-component -D

然后在 .babelrc 文件中进行配置：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

现在你可以在需要的地方引入组件：

import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

new Vue({
  el: '#app',
  render: h => h(App)
});

3. 使用 Element-UI 组件

示例组件

按钮组件

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
    <el-button>Default Button</el-button>
    <el-button type="text">Text Button</el-button>
  </div>
</template>

输入框组件

<template>
  <div>
    <el-input placeholder="Please input"></el-input>
  </div>
</template>

表格组件

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }
      ]
    };
  }
};
</script>

表单组件

<template>
  <el-form :model="form">
    <el-form-item label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form);
    }
  }
};
</script>

4. 自定义主题

Element-UI 支持自定义主题。你可以使用官方的主题生成工具 element-theme 来自定义你的主题。

安装工具

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件

et -i

编译主题

修改 element-variables.scss 文件中的变量，然后运行：

et

生成的自定义主题文件会在 ./theme 目录下，你可以在项目中引入：

import './theme/index.css';

通过这些步骤，你可以快速上手使用 Element-UI 组件库来构建 Vue.js 应用程序。