当前位置：首页 > 前端教程

elementui模板

2026-03-05 18:45:17前端教程

ElementUI 模板使用指南

基础模板结构

ElementUI 是基于 Vue.js 的组件库，使用时需确保项目已安装 Vue 和 ElementUI。以下是一个基础模板示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ElementUI Template</title>
  <!-- 引入 ElementUI 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>

  <!-- 引入 Vue 和 ElementUI -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>
    new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

通过 Vue CLI 集成

若使用 Vue CLI 创建项目，可通过以下步骤集成 ElementUI：

安装依赖：
```
npm install element-ui -S
```

在 main.js 中全局引入：


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

Vue.use(ElementUI);

new Vue({ render: h => h(App) }).$mount('#app');


#### 按需引入模板  
为优化体积，推荐按需引入组件（需安装 `babel-plugin-component`）：  

1. 修改 `babel.config.js`：  
```javascript
module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

在组件中按需引入：


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

export default { components: { 'el-button': Button, 'el-select': Select } };


#### 常用模板示例  
表单模板：  
```html
<el-form :model="form" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form-item>
</el-form>

表格模板：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>