element使用

官方网址： 点击

全局使用

1.创建项目

vue init webpack vue-ele

配置

2.安装依赖

npm install

3.安装loader模块(开发)

• npm install style-loader -D
• npm install css-loader -D
• npm install file-loader -D

4.安装ElementUI模块

npm install element-ui --S

5.在main.js中配置

• import ElementUI from ‘element-ui’
• import ‘element-ui/lib/theme-chalk/index.css’
• Vue.use(ElementUI)

6.添加build/webpack.base.conf.js 文件内容

{
test: /\\\\\\\\.css$/,
loader:"style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:"file"
}

7.使用App.vue

<template>
<div id="app">
<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>
</template>

局部使用

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <h1>引入element</h1>
    <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-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {Button, Select} from 'element-ui'

  export default {
    name: 'App',
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''

      }
    },
    components: {
      [Button.name]: Button,
      [Select.name]: Select,
    }
  }

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