vue2如何使用element ui快速搭建自己的前端页面_vue element ui 页面框架搭建

---

前言

element ui 是一款非常好用的前端组件库，里面大量的日常开发中所需要用到的组件，结合 vue 便可达到快速开发的目的。

---

以下是本篇文章正文内容

一、element ui是什么？

element ui，是一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库 是网站快速成型工具。

点击 element ui 进入官方网址

二、使用步骤

1.在项目中引入 element ui

使用 npm 在项目中安装 element ui（示例）：

npm i element-ui -S
1

2.全局引入 element ui 组件

代码如下，在 main.js中写入（示例）：

import Vue from 'vue';   //vue main.js自带
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; //vue main.js自带

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});  //vue main.js自带
1
2
3
4
5
6
7
8
9
10
11

3.局部引入 element ui 组件

在项目目录中找到 babel.config.js 文件 在文件中添加以下代码内容：

"plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
1
2
3
4
5
6
7
8
9

---

接下来，你你就可以引入部分项目需要的组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';  //vue 自带
import { Button, Select } from 'element-ui';
import App from './App.vue'; //vue 自带

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});//vue 自带
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.使用组件

在你自己所需要的页面中直接使用 element ui 官网提供的 组件 （代码示例）：

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

1
2
3
4
5
6
7
8
9