无法从“element-ui”库中添加 TimePicker 组件。如何正确添加？答案

【问题标题】：Can't add TimePicker component from 'element-ui' library. How To add it correctly?无法从“element-ui”库中添加 TimePicker 组件。如何正确添加？
【发布时间】：2017-10-15 22:15:54
【问题描述】：

我需要将 'element-ui' 库中的一个组件添加到我的项目中（Laravel + Vue）。我对TimePicker 感兴趣。

我在 bootstrap.js 文件中添加了下一个代码：

/**
 * Element, a Vue 2.0 based component library for developers, designers
 * and product managers.
 */
import { TimePicker } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(TimePicker.name, TimePicker)

所有这些代码都是根据docs编写的。

但我在浏览器中收到错误消息：

[Vue 警告]：未知的自定义元素：- 你注册了吗组件正确吗？对于递归组件，请确保提供“名称”选项。

我尝试使用相同的代码集导入“按钮”组件并且它正在工作。但它不适用于 TimePicker。 我做错了什么？为什么它不起作用

【问题讨论】：

你的 HTML 是什么样的？ TimePicker.name 的值是多少？
试试Vue.use(TimePicker)
@RoyJ 感谢您的回复。我发现了错误。我在“模板”中使用的组件名称错误。我将其命名为“时间选择器”而不是“el-time-picker”。

标签： vue.js vuejs2 vue-component

【解决方案1】：

我发现了问题。就我而言，我在“模板”中使用的组件的名称是错误的。我将其命名为“time-picker”而不是“el-time-picker”

在您的<template>-s 中使用组件时，请勿在组件名称中添加前缀“el-”。

完整答案：

1) 要将组件全局添加到您的应用程序，请在您的 js 文件中添加此代码（组件名称和其他示例，您可以罚款 here ）：

import { TimePicker } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(TimePicker.name, TimePicker)

将新组件添加到您的 vue.js 文件中的 <templete> 部分。：

<el-time-picker></el-time-picker>

【讨论】：