Vue学习-Element-UI框架使用

1.Element安装

使用Vue脚手架搭建好项目后
安装Element-UI

cnpm i element-ui -S

2.引入Element文件

在src下的main.js中添加如下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

然后就可以完整引入Element-UI了

---

PS：Config中的index.js中
将useEslint的值改成false，即可关闭Eslint代码规范
即没有了extra semicolon的代码规范要求

3.使用Element-UI里的组件

在官网找到特定的样式：https://element.eleme.cn/#/zh-CN/component
以官网的基础表格Table为例

<template>
  <el-table :data="tableData" 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>
</template>

<script>
export default {
  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 弄"
        }
      ]
    };
  }
};
</script>

在Vue的src的components下新建一个模板，例如命名为First.vue
输入以上代码
在src里的router的index.js中对这两个vue模板进行注册

import First from '@/components/First'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //新增该项
    {
      path: '/first',//设置访问路径
      name: 'First',
      component: First
    }
  ]
})

访问localhost:8080/first即可查看效果