Vue2引入element-ui总结

element是国内饿了么公司提供的一套开源前端框架，简介优雅，提供了vue、react、angular等多个版本。官方推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。引入步骤如下：

1.在项目目录里输入如下指令

npm i element-ui -S

i表示install按照

-S表示在package.json中做安装记录

指令执行完成后，可以看到element-ui代码已经下载到node_modules文件夹中，同时package.json中已做依赖

2.引入 Element

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

Vue.config.productionTip = false



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

最后就可以在vue组件中使用element-ui控件了

<template>
<div>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  <el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
 </el-switch>
</div>
</template>

<script>
  export default {
    name: 'Table',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        value: true
      }
    }
  }
</script>

效果如下: