08 vue项目中加入element-ui显示表格

本节我们将通过easytable显示数据。

1、前提约束

完成nodejs，vue-cli，webpack，webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62

2、操作步骤

• 使用脚手架创建一个vue项目模板并启动成功，假设项目名称为vue-element
  https://www.jianshu.com/p/644eb12a8174
• 下载element-ui的js包

cd vue-element
cnpm install element-ui --save-dev

• 修改main.js，加入以下内容

import ElementUI from 'element-ui'
Vue.use(ElementUI)

• 在src文件夹下创建mock文件夹，在mock文件夹下创建table.js

export default [
  { 'id': '1', 'name': 'xiaoli' },
  { 'id': '2', 'name': 'jiangsu' },
  { 'id': '3', 'name': 'ali' },
  { 'id': '4', 'name': 'zhangli' },
  { 'id': '5', 'name': 'wanhe' },
]

• 修改HelloWorld.vue

• 编译和启动

npm run build
npm run dev

访问提示的url，便能看到显示的表格【笔者没有关注居中】：

1

以上就是在vue项目中通过element-ui显示数据的过程。