Vue.js的element-ui基础了解与运用

首先，我们要了解Vue.js是什么？

Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻，压缩后大小仅有33KB；而渐进式，是指程序员可以了一步一步、有阶段性的使用Vue，无需项目一开始就使用所以东西，使用Vue可以让Web开发更加简单，同时有别于传统的前端开发模式，他提供了时下Web开发中常见的高级功能，比如前端路由，可复用组件，状态管理等，这也是Web前端开发者们热爱Vue.js的主要原因。

其次，我们再来了解element-ui是什么？

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，提供了丰富的 PC 端组件，简化了常用组件的封装。Element 是基于 Vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的 PC 端组件，减少用户对常用组件的封装，降低了开发的难易程度。

再来，我们来了解二者之间的关系是什么？
Element-Ui 是基于 Vue 封装的组件库，简化了常用组件的封装，提高了重用性原则；Vue 是一个渐进式框架，Element-Ui 是组件库。所以我们可以知道，element是vue.js的一个组件，可以更轻松的帮助我们进行封装，学清楚element还是十分重要的。

---

element-ui的官方网站：

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

安装：

建立好脚手架后，在终端中打开，命令行中输入npm element-ui -S命令等待安装

在package.json代码中查看有没有 "element-ui": "^2.15.14" *此为版本号。

在 main.js 中写入以下内容：

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({
  el: '#app',
  render: h => h(App)
});

---

element的使用：

       span属性：表示col所要占领的栅格占比个数。

　　offset属性：表示col相对偏移的个数。

　　Container布局容器

　　这些布局容器，一般充当div来使用。

　　el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。

　　el-header：顶栏容器

　　el-footer：底部栏容器

　　el-aside：侧边栏容器

　　el-main：页面主视图

　　icons的使用

　　在element-ui 中，图标是用class就可以搞定的。

　　比如一个编辑的图标就可以如下表示：

　　按钮（el-button）

　　按钮是el-button来表示的

　　按钮是分类的，每一种类型就对应不同的button。

　　按钮的类型type可取值：’primary’、’success’、’warning’、’info’、’danger’

　　plain：决定了按钮是否使用素色系列。

　　round：决定了按钮是不是圆角展示。

首先在views文件夹中创建一个vue文件LoginView.vue以组件的按钮为例，HTML的button就是很普通，并没有什么特点，设置其他属性就会很麻烦，浪费时间在编辑样式上面对于项目的制作就会更加耗时间。要做到更美观的布局，样式的选择。使用type、plain、round和circle属性来定义 Button 的样式。

在<template>标签中输入以下代码，即可实现上述图片的按钮效果

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

若是使用需要数据存储的组件，则要在<script>标签中先定义出储存的数据。

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

---

除了按钮和文本框，还有很多组件：

element的使用就是很简单，只需要看好想要达成的效果，再去组件中寻找类似的，与bootstrap有异曲同工之妙。