Element-UI快速入门

Element-UI 是一个基于 Vue.js 的桌面端 UI 组件库，用于快速构建美观的界面。以下是 Element-UI 快速入门的基本步骤：

1. 安装 Element-UI：

   • 使用 npm 安装：

     npm install element-ui --save
     

   • 使用 yarn 安装：

     yarn add element-ui
     ```[^3^]
     
     

2. 引入 Element-UI：

   • 在你的 Vue 项目的 main.js 文件中引入 Element-UI 及其样式：

     import Vue from 'vue';
     import ElementUI from 'element-ui';
     import 'element-ui/lib/theme-chalk/index.css';
     import App from './App.vue';
     
     Vue.use(ElementUI);
     new Vue({
       render: h => h(App),
     }).$mount('#app');
     ```[^3^]
     
     

3. 使用 Element-UI 组件：

   • 在你的 Vue 模板中，你可以直接使用 Element-UI 提供的各种组件。例如，使用按钮组件：

     <template>
       <div>
         <el-button type="primary">Primary Button</el-button>
         <el-button type="success">Success Button</el-button>
       </div>
     </template>
     

   • 其他组件如 Dialog（对话框）、Table（表格）、Form（表单）等也可以以类似的方式引入和使用。[³]

4. 自定义主题（可选）：

   • 如果你需要自定义 Element-UI 的主题，可以安装主题工具：

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

   • 初始化变量文件以生成 element-variables.scss 文件，你可以在此文件中修改样式变量。
   • 编译主题并引入自定义主题到项目中。[³]

5. 查看官方文档：

   • 官方文档提供了所有组件的详细用法和示例，是学习 Element-UI 的宝贵资源。可以访问 Element-UI 官网 来获取更多信息和示例代码。[³]

Element-UI 提供了一系列预设计的组件，以下是几个使用 Element-UI 构建的常见 UI 组件示例：

1. 导航栏（Navbar）

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="3" disabled>消息中心</el-menu-item>
    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

2. 表格（Table）

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

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

3. 表单（Form）

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符之间', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

4. 对话框（Dialog）

<template>
  <el-button type="text" @click="dialogVisible = true">打开 Dialog</el-button>
  <el-dialog title="提示" :visible.sync="dialogVisible">
    <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>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

5. 标签页（Tabs）

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

由于篇幅限制，我将提供更多 Element-UI 组件的示例代码，帮助你进一步了解如何使用这些组件来构建美观的 UI。

6. 通知（Notification）

Element-UI 的 el-notification 组件用于显示通知消息。

<template>
  <el-button @click="open">点击打开通知消息</el-button>
</template>

<script>
export default {
  methods: {
    open() {
      this.$notify({
        title: '提示',
        message: '这是一条通知消息'
      });
    }
  }
};
</script>

7. 步骤条（Steps）

el-steps 组件用于展示步骤条，适用于向用户展示操作步骤或进度。

<template>
  <el-steps :active="active" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
  </el-steps>
  <el-button style="margin-top: 20px;" @click="next">下一步</el-button>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  }
};
</script>

8. 卡片（Card）

el-card 组件用于展示卡片，适合用于展示媒体内容或列表。

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <img src="image-url.jpg" class="image">
        <div style="padding: 14px;">
          <span>好吃的美食</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  }
};
</script>

<style>
.image {
  width: 100%;
  height: 200px;
}
</style>

9. 菜单（Menu）

el-menu 组件用于创建导航菜单。

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect">
    <el-submenu index="1">
      <template slot="title">导航一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-menu-item index="3" disabled>导航三</el-menu-item>
    <el-submenu index="4">
      <template slot="title">导航四</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

10. 消息提示（Message）

el-message 组件用于显示全局的消息提示。

<template>
  <el-button @click="open">点击打开消息提示</el-button>
</template>

<script>
export default {
  methods: {
    open() {
      this.$message('这是一条消息提示');
    }
  }
};
</script>