WEB前端：vuejs全家桶（36）：使用Elment UI、使用less

二、 Elment UI

1. 简介

    Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率
        ElementUI  PC端
        MintUI 移动端

[官网](http://element.eleme.io/)

2. 快速上手

新建项目
vue init webpack-simple element-demo

2.1 安装elment ui

cnpm install element-ui -S

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader

默认并没有style-loader模块，所以需要单独安装
    cnpm install style-loader --save-dev

编译运行时提示：cross-env’ 不是内部或外部命令

依赖项丢失，直接再执行下即可。
cnpm install

使用UI组件

第1步：在src目录新建components目录， 在components目录新建DatePicker.vue
第2步：在App.vue的<script>引入import DatePicker from './components/DatePicker'
第3步：注册DatePicker
第4步：在<template>放组件DatePicker

DatePicker.vue

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      size="small"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>

App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div>
      <el-button disabled>默认按钮</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>
   </div>
   <!-- 图标 -->
   <div>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
   </div>
   <!-- 图标 -->
   <div>
      <i class="el-icon-edit"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>
   </div>
   <!-- 布局 -->
   <div>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
   </div>
   <DatePicker></DatePicker>
   <Upload></Upload>
  </div>
</template>

<script>
import DatePicker from './components/DatePicker'
import Upload from './components/Upload'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js!'
    }   
  },
  components:{
      DatePicker,
      Upload
  }
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

---

---

#### 2.4 使用组件

#### 2.5 使用less
    第1步：安装loader，需要两个：less、less-loader
        cnpm install less less-loader -D
    第2步：在webpack.config.js中添加loader 
       {
          test: /\.less$/,
          loader: 'less-loader'
      }
	第3步：在App.vue必须要指定lang="less" */
	
	<style lang="less"> /* 必须要指定lang="less" */
  .grid{
    border:1px solid #ccc;
    font-size:20px;
    color:@color;
    .h(50px);
  }
  @color:red;
  .h(@height){
    height:@height;
  }
</style>

---

### 3. 按需引入组

#### 3.1 安装babel-plugin-component
    cnpm install babel-plugin-component -D  

#### 3.2 配置.babelrc文件
    "plugins": [["component", [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
    ]]]

#### 3.3  只引入需要的插件