Vue-cli结合Element-UI的环境搭建使用

1 首先在安装node和vue的情况下  初始化一个vue的项目: vue init webpack <Project Name>
如果是Mac下可能要使用 sudo vue init webpack my-project

2 vue项目创建并初始化好了之后 进入项目的目录下 使用npm i element-ui -S安装elementUI
cd my-project
npm i element-ui -S

3 经过前面2步项目环境已经搭建好了 这里找个案例来试一下

4 在webstorm中打开工程 修改main.js

image.png

5 components目录下创建一个table.vue

<template>
  <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-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </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>

<style></style>

6 修改index下的router 新增/table

image.png

7 修改后在项目目录下 使用命令 npm run start启动项目 访问http://localhost:8080/#/table 可以看到elmentUI的table已经正确的显示出来了✅

image.png