Vue使用饿了么el-table标签方法及报错解决

学习Vue

最近在学习vue，使用到了饿了么标签中的表格。

使用方式

一般情况下，再vue中键入如下图所示代码使用即可。

代码链接：https://element.eleme.cn/#/zh-CN/component/table

• 结果
  但是页面只有一个官方图标，其他什么也不显示，更没有想要的表格：
  

解决过程

检查元素，点开控制台，发现页面报错。

[Vue warn]: Unknown custom element: <el-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

• 发现是el-table标签的问题。

错误原因

没有在main.js文件中注册ElementUI组件。

解决方法

找到main.js，加入如下代码:
注册组件：

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

使用该组件：

Vue.use(ElementUI)

如果没有该组件，需要安装。
切换到这个项目的目录下安装组件。
淘宝镜像：

cnpm i element-ui -S  

或一般命令：

npm i element-ui -S

结果

此时再运行界面，就没有报错，可以正常显示表格了。

运行界面