elementUI基础使用总结（上篇）

1.定义

element ui基于vue的一个ui框架，elementUI基于vue开发了许多的组件。

2.安装elementUI

2.1通过vue脚手架创建项目

1. 创建项目

    vue-cli init webpack element
   

   F:\wxcode>vue init webpack element #出现下面的错误
     Command vue init requires a global addon to be installed.
     Please run npm install -g @vue/cli-init and try again.
   #利用下面的命令解决
   F:\wxcode>npm install -g @vue/cli-init
   
   

   ? Project name element #项目名称 是否为element，回车
   ? Project description A Vue.js project #是否建立vue.js的描述 回车
   ? Author OAA <oaa@zh.com> #作者是谁 回车
   ? Vue build standalone #是否构建单个的过程 回车
   ? Install vue-router? Yes #是否需要vue的路由 输入y
   ? Use ESLint to lint your code? No #测试 输入n
   ? Set up unit tests No #测试 输入n
   ? Setup e2e tests with Nightwatch? No #测试 输入n
   ? Should we run `npm install` for you after the project has been created? (recommended) npm #使用哪种包管理方式 这里所有npm 
   

2.启动vue项目

npm start

3.安装elementUI

#1.下载elementui依赖
npm i element-ui -S
#2.指定当前项目中使用elementUI 下面的修改在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//在vue脚手架中使用elementUI
Vue.use(ElementUI);

4.按钮组件

使用type、plain、round和circle属性来定义 Button 的样式。

<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>

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

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" 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="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

3.按钮组件的使用

3.1elementui使用技巧

elementUI的相关组件都是以“el-”组件名称开头的

例如：

<el-button>默认按钮</el-button>

3.2按钮属性使用

在elementUI中所有组件的属性全部写在组件标签上

<el-button type=“success” 属性名=“属性值”>按钮

例如：

 <el-button type="success" plain="true">按钮</el-button>

3.3按钮组的使用

例如：

<el-button-group>  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> </el-button-group>

注意:

1.在elementUI中所有组件都是el-组件名称 方式进行命名

2.在elementUI中组件的属性使用都是直接用：属性名=属性值的方式进行设置的

4.Link文字链接组件

4.1创建文字链接组件

<el-link&