vue组件库的正确使用方法是啥？
Posted
技术标签:
【中文标题】vue组件库的正确使用方法是啥？【英文标题】：What is the correct way to use vue component libraries?vue组件库的正确使用方法是什么？ 【发布时间】：2021-08-08 11:06:17 【问题描述】：我正在尝试在 Laravel 项目中使用一些外部 vue 组件库，但我最初几次尝试使用 vue-avatar、vue 通知铃和 pwa-install 均未成功。
使用前两个，一切似乎都已检查，没有构建错误，组件实际上显示在 html 中，但没有头像或通知铃。没有迹象表明外部包导入到我的组件中。
这些是我采取的步骤：
-
根据需要 npm install vue-avatar 和 notification-bell。
我为每个组件创建了一个组件，导入了已安装的每个包并进行了默认导出。
然后我照常在另一个文件中使用我的组件。
代码基本上是样板，没有什么可添加的，所以我不知道为什么我没有得到预期的输出。
任何帮助将不胜感激。
这是我的头像组件代码：
<template>
<div></div>
</template>
<script>
import Avatar from 'vue-avatar'
export default
components:
Avatar
</script>
这是我使用它的布局文件的代码：
<template>
<div>
<div class="min-h-screen bg-gray-100">
<nav class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<breeze-application-logo class="block h-9 w-auto" />
</inertia-link>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<breeze-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</breeze-nav-link>
</div>
</div>
<div v-if="$page.props.flash.message" class="alert">
$page.props.flash.message
</div>
<!-- <div>
<broadcast-message></broadcast-message>
</div> -->
<avatar :username="$page.props.auth.user.first_name"></avatar>
<notification-bell />
<div class="hidden sm:flex sm:items-center sm:ml-6">
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<breeze-dropdown align="right" >
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
$page.props.auth.user.first_name
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</template>
<template #content>
<breeze-dropdown-link :href="route('logout')" method="post" as="button">
Log Out
</breeze-dropdown-link>
</template>
</breeze-dropdown>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown " stroke-linecap="round" stroke-linejoin="round" stroke- d="M4 6h16M4 12h16M4 18h16" />
<path :class="'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown " stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown" class="sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<breeze-responsive-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</breeze-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="flex items-center px-4">
<div class="font-medium text-base text-gray-800"> $page.props.auth.user.first_name </div>
</div>
<div class="mt-3 space-y-1">
<breeze-responsive-nav-link :href="route('logout')" method="post" as="button">
Log Out
</breeze-responsive-nav-link>
</div>
</div>
</div>
</nav>
<!-- Page Heading -->
<header class="bg-white shadow" v-if="$slots.header">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<slot name="header" />
</div>
</header>
<!-- Page Content -->
<main>
<slot />
</main>
</div>
</div>
</template>
<script>
import BreezeApplicationLogo from '@/Components/ApplicationLogo'
import BreezeDropdown from '@/Components/Dropdown'
import BreezeDropdownLink from '@/Components/DropdownLink'
import BreezeNavLink from '@/Components/NavLink'
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink'
//import BroadcastMessage from '@/Components/BroadcastMessage'
import Avatar from '@/Components/DashboardAvatar'
import NotificationBell from '@/Components/DashboardNotificationBell'
export default
props:
username: String,
,
components:
BreezeApplicationLogo,
BreezeDropdown,
BreezeDropdownLink,
BreezeNavLink,
BreezeResponsiveNavLink,
//BroadcastMessage,
Avatar,
NotificationBell,
,
data()
return
showingNavigationDropdown: false,
,
</script>
根据您的输入，我尝试按照建议在组件中使用导入，但在控制台中出现“超出最大调用堆栈”错误。查看我的新代码：
<template>
<avatar :username="username"/>
</template>
<script>
import Avatar from 'vue-avatar'
export default
props:
username: String
,
name: 'DashboardAvatar',
components:
Avatar
</script>
当我直接导入使用时，出现类型错误'cannot read property _c of undefined.
我更正了我的组件中的一个错误：<avatar :username="username" /> not <dashboard-avatar> ，该错误现在与我上面提到的直接使用该组件的类型错误相同。
【问题讨论】：
这篇文章已经有一个接受的答案。它无法回答更多..打开一个新问题或简单地用谷歌搜索错误 - 有人可能犯了同样的错误。 【参考方案1】：我认为您可能误解了 Vue SFC 的工作原理。
您正在导入头像组件，但实际上并未使用它。
正确的方法是例如：
<template>
<avatar v-bind="$attrs" v-on="$listeners"/>
</template>
<script>
import Avatar from 'vue-avatar'
export default
name:'Avatar',
components:
Avatar
</script>
这样你从 vue-avatar 导入组件，并在 Avatar SFC 中实际使用它，（$attrs 和 $listeners 只是将所有属性和事件绑定到组件）。完成此操作后，您的导入应该会起作用。
或者您可以直接在父组件中导入它，而无需先创建子组件（因为您没有自定义 vue-avatar 功能，而只是使用开箱即用的功能）：
<script>
import BreezeApplicationLogo from '@/Components/ApplicationLogo'
import BreezeDropdown from '@/Components/Dropdown'
import BreezeDropdownLink from '@/Components/DropdownLink'
import BreezeNavLink from '@/Components/NavLink'
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink'
//import BroadcastMessage from '@/Components/BroadcastMessage'
import Avatar from 'vue-avatar' <----------------------Use the module here directly.
import NotificationBell from '@/Components/DashboardNotificationBell'
export default
props:
username: String,
,
components:
BreezeApplicationLogo,
BreezeDropdown,
BreezeDropdownLink,
BreezeNavLink,
BreezeResponsiveNavLink,
//BroadcastMessage,
Avatar,
NotificationBell,
,
...
【讨论】：
感谢两位的意见。我记得直接导入和使用组件没有任何成功。我现在再次尝试了两种方法，但都没有成功，现在我将编辑我的问题以显示结果。 是否可以附上控制台错误的截图？如果是，怎么做？ using v-bind="$attrs" 给出了与我添加的代码相同的输出。使用 v-on="$listeners" 在编辑器中显示弃用通知，因此我将其删除。【参考方案2】：您可以直接使用 vue 组件，至少在您达到其限制并添加一些自定义或任何您喜欢的东西之前。您不必为该组件创建组件。
该组件的模板只是一个空 div。 如果你想为组件创建一个组件，你应该使用它，而不仅仅是导入它。我对 Vue 有点生疏，但我相信您可以为模板执行此操作：
<template>
<Avatar someAttribute="value" />
</template>
不过你也可以导入头像组件，在需要的地方直接使用<Avatar>。
如果你想拥有一些你不想重复的应用范围的属性，像你一样创建一个组件对于传递默认参数很有用。在这种情况下，您还应该将 props 转发给该组件，以便其他人可以对其进行自定义。
【讨论】：
我相信这两个回答都正确回答了我提出的问题，即使我现在面临另一个问题。 是的，我和托马斯同时回答。您可以随时提出另一个问题（或者先阅读一些 Vue 教程？） 感谢@Peter，我已经阅读了一些教程和文档，但我会再读一遍文档并获取更多教程。以上是关于vue组件库的正确使用方法是啥？的主要内容，如果未能解决你的问题，请参考以下文章
在 Vue 项目中包含或初始化 jQuery 库的最佳方法是啥？