Element UI的第一个程序（标签使用）

1：Element UI 官方文档：https://element.faas.ele.me/

2：Element UI是什么？

• 网站快速成型工具

•  

  Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

　　

此博客只是 记录一下按钮组件的使用：

使用步骤：先创建一个vue项目：

• 　　　输入cmd ：输入命令：vue init webpack hello-vue来创建一个vue项目：
• 　　　　　

 

 

•  　　然后创建成功进入hello-vue文件夹：cd hello-vue:
• 　    然后安装vue-router：npm install vue-router --save-dev:
• 　　继续安装 element-ui：npm i element-ui -S:
• 　　安装依赖：npm install:
• 　　安装SASS  加载器：cnpm install sass-loader node-sass --save-dev:
• 　　启动测试：npm run start:
•  　　输入：http://localhost:8081 如果页面显示成功就代表创建成功　　

　idea中打开hello-vue文件夹

　　在main.js文件中引入Element UI：

//引入element ui样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用element ui
Vue.use(ElementUI);

　我们现在可以进行饿了么 UI的操作了 来最简单的按钮操作：

　　在components：创建：Butten.vue：

<template>

</template>

<script>
    export default {
        name: "butten.vue"
    }
</script>

<style scoped>

</style>

然后在index.js中：引入组件并配置

import Vue from 'vue'
import Router from 'vue-router'
//引入组件
import Button from '../components/Butten'

Vue.use(Router)
//path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
// component表示路径对应显示的组件。
export default new Router({
  routes: [
    {path: '/butten', component:Button}
  ]
})

然后在APP.vue中：

<template>
  <div id="app">
    <a href="#/butten">点我显示出来butten</a>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后从官网中找出按钮标签的基础用法：

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

Butten.vue中导入：

<template>
<div>
  <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>
</div>
</template>

<script>
    export default {
        name: "butten.vue"
    }
</script>

<style scoped>

</style>

显示为：

 

 

 如果想改变格式可以参考官网的：

 

 在标签中修改 添加即可：比如：有些布尔类型属性没有写值 因为有默认值

<el-button type="primary" size="small" plain>主要按钮</el-button>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　小杰的Element UI笔记 会慢慢更新一系列！