shopify分享插件（广州蓝景分享—7 个前端开发实用的 Vue 3 插件和库）shopify导入产品插件，不看后悔，

原副标题：深圳蓝景撷取—7 个前端开发新颖的 Vue 3 插件和库

想在 2023 年构筑出众的 Vue.js 插件吗？假如你的提问是 YES，那么一定要试试看这首诗重新整理的 7 个 Vue 3 插件和库。无须撰写大量标识符，那些更让人不可思议的插件和库就能为插件加进超赞的优点和机能。

今天摩拜就跟大家撷取：那些插件和库，涵盖动画电影、加密、操控性强化等方方面面，所以假如你想用 Vue 3 建立绝妙的 web app，可一千万不要错失哦！

1. Vuetify

插件门牌号：https://vuetifyjs.com/en/

Vuetify 是两个强悍而灵巧的 Vue.js UI 库，能协助为 web 插件构筑耐用且积极响应快速的采用者介面。Vuetify 提供更多了一连串预构筑的 UI 模块和式样，可在构筑 Vue.js 应用领域时节约他们的时间和心力。

有了 Vuetify，你就能随心所欲建立积极响应式产业布局、排印、工具栏、按键、配置文件、表单和许多其他 UI 原素，而无须Cubzac撰写所有 CSS 和 HTML。该库还包括命令、主轴自订、多元化和可出访性等高阶机能，可协助建立极具互动性、开放性和采用者亲善的web插件。

安装

# create new Vue.js Project with Vuetify

yarn create vuetify

# add to an existing Vue.js project

yarn add vuetify@^3.1.5

用语

import { createApp } from vue

import App from ./App.vue

// Vuetify

import vuetify/styles

import { createVuetify } from vuetify

const vuetify = createVuetify({

components,

directives,

})

createApp(App).use(vuetify).mount(#app)

在项目中增设完 Vuetify 之后，让他们在插件中加进许多基本的 Vuetify 模块。

具体来说将下列标识符加进到 main.js 或 main.ts 文档中

import * as components from vuetify/components

那时能在自己的模块中采用 Vuetify 模块了

//button

<v-btn>

Button

</v-btn>

//an autocomplete extends a select input with autocomplete features

<v-autocomplete

label="Autocomplete"

:items="[California, Colorado, Florida, Georgia, Texas, Wyoming]"

></v-autocomplete>

你也能用 Vuetify 将命令附带到模块上。让他们将下列标识符块也附带到 main.js 或 main.ts 文档中：

import * as directives from vuetify/directives

那时他们来试著许多命令：

v-intersect命令借助 Intersection Observer API。它提供更多了两个更易采用的介面，用作检验原素何时能在采用者视嘴中由此可见。

//v-intersect

<v-card

v-intersect="onIntersect"

class="mx-auto"

max-width="336"

>

<v-card-title>Card title</v-card-title>

<v-card-text>

This is the cards subtext

</v-card-text>

</v-card>

<script setup>

import {ref} from vue

const isIntersected = ref(false)

const onIntersect = (isIntersecting, entries, observer) => {

isIntersected.value = isIntersecting

},

</script>

v-click-out命令在单击目标原素之外的内容时调用函数。用作v-menu（Vuetify 菜单模块）和v-dialog（Vuetify 对话框模块）等模块内部。

<template>

<v-app>

<v-card

v-click-outside="onClickOutside"

:color="active ? primary : undefined"

:dark="active"

class="mx-auto"

height="256"

rounded="xl"

width="256"

@click="active = true"

>

<div

class="text-h6 text-md-h4 fill-height d-flex align-center justify-center">

{{ active ? Click Outside : Click Me }}

</div>

</v-card>

</v-app>

</template>

<script setup>

import {ref} from vue

const active = ref(false)

const onClickOutside = () => {

active.value = false

},

},

</script>

2. VueUse

插件门牌号：https://vueuse.org/

VueUse 提供更多了 200+ 个基本新颖程序函数的集合，用作与浏览器、状态、网络、动画电影、时间等各种 API 进行交互，那些函数能随心所欲引入并在 Vue.js 模块中采用。因此，无须撰写太多标识符就能加进出访本地存储、采用全屏、单击原素外部等机能。只需组合引入，即可采用。

安装

npm i @vueuse/core

用语

// reactive localStorage

<script setup lang="ts">

import { useStorage } from @vueuse/core

const state = useStorage(my-store, { hello: hi, greeting: Hello })

</script>

上面的标识符提供更多了一种在浏览器的localStorage或sessionStorage中存储数据的积极响应式方法。因此能实时查看本地存储和会话存储中的更新数据。

//create a draggable element

<script setup lang="ts">

import { ref } from vue

import { useDraggable } from @vueuse/core

const el = ref<HTMLElement | null>(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`

const { x, y, style } = useDraggable(el, {

initialValue: { x: 40, y: 40 },

})

</script>

<template>

<div ref="el" :style="style" style="position: fixed">

Drag me! I am at {{x}}, {{y}}

</div>

</template>

上面的标识符使el原素可拖动，并且还提供更多有关原素移动时 x 轴和 y 轴屏幕位置的实时信息。

//Detects that a target elements visibility.

<div ref="target">

<h1>Hello world</h1>

</div>

<script>

import { ref } from vue

import { useIntersectionObserver } from @vueuse/core

export default {

setup() {

const target = ref(null)

const targetIsVisible = ref(false)

const { stop } = useIntersectionObserver(

target,

([{ isIntersecting }], observerElement) => {

targetIsVisible.value = isIntersecting

},

return {

target,

targetIsVisible,

}

},

}

</script>

上面的标识符中，当链接的原素在屏幕上由此可见时会触发事件。这是一项非常简便的技术，用作建立两个动画电影触发器。

VueUse中有很多组合用语，假如你感兴趣，也能更深入地研究这方面的知识。

3. vue-toast-notification

插件门牌号：https://github.com/ankurk91/vue-toast-notification

向采用者显示通知的重要性众所周知。通知向采用者提供更多有关其操作成功或失败的即时反馈，使采用者体验更加直观。

vue-toast-notification 插件简化了在 Vue.js 应用领域中显示通知的过程。它提供更多了两个更易采用且高度可定制的通知系统，能快速集成到项目中。

安装

npm install vue-toast-notification@^3.0

用语

import {createApp} from vue;

import ToastPlugin from vue-toast-notification;

// Import one of the available themes

//import vue-toast-notification/dist/theme-default.css;

import vue-toast-notification/dist/theme-sugar.css;

const app = createApp({});

app.use(ToastPlugin);

app.mount(#app);

let instance = app.$toast.open(You did it!);

// Force dismiss specific toast

instance.dismiss();

// Dismiss all opened toast immediately

app.$toast.clear();

app.$toast.open(Howdy!);

// Can accept an Object of options

app.$toast.open({

message: Something went wrong!,

type: error,

// all of other options may go here

});

4. Formkit

插件门牌号：https://formkit.com/

配置文件是 web 应用领域的关键部分，用作捕获采用者输入和启用交互。配置文件能是简单的，也能是复杂的，用作注册、数据收集和电子商务等任务。配置文件可改善采用者体验和系统机能，并且能针对验证、错误处理和式样进行自订。但众所周知，配置文件处理起来是有难度的，尤其是当它们变得越来越复杂时。FormKit 提供更多了一组新颖程序，使他们能够随心所欲地在 Vue.js 插件中构筑和管理配置文件，可操作范围包括从简单的输入验证到诸如条件逻辑和动态配置文件字段等高阶机能。

安装

npm install @formkit/vue

用语

插件中的 formkit 用例并不少，他们先从两个示例开始。具体来说在 Vue 3 插件中增设 Formkit。

import { createApp } from vue

import { plugin, defaultConfig } from @formkit/vue

import App from App.vue

createApp(App).use(plugin, defaultConfig).mount(#app)

将 FormKit 引入到全局的 Vue.js app 之后，他们就能在模板中采用了。例如

<FormKit type="repeater" label="My Movies" add-label="Add Movie">

<FormKit

name="movie"

type="autocomplete"

label="Search for a movie"

placeholder="Ex: Interstellar"

:options="searchMovies"

/>

<FormKit type="rating" label="My rating" />

</FormKit>

这是两个关于如何采用 Formkit 的简单示例。Formkit 是两个非常强悍的平台。假如你对采用 FormKit 构筑强悍的配置文件感兴趣，那么试著 Formkit 一定不会让你失望。

5. Vue-draggable

插件门牌号：https://github.com/SortableJS/vue.draggable.next

将拖放机能加进到 Vue.js 应用领域能改善采用者体验。因为拖放机能允许采用者以更直观的方式与插件交互，所以采用者能更随心所欲地组织和操作数据。Vue-draggable 是实现拖放机能的绝佳工具，因为它简化了流程，即使是刚接触 Vue.js 的开发人员也能随心所欲采用。将这个插件加进到 Vue.js 插件，你就能建立极具吸引力和动态的采用者体验，提高采用者回头率。

安装

#yarn

yarn add vuedraggable@next

#npm

npm i -S vuedraggable@next

用语

让他们用 Vue-draggable 建立两个简单的可排序列表。

<template>

<div>

<draggable

v-model="cars"

@start="drag = true"

@end="drag = false"

item-key="id"

>

<template #item="{ element }">

<div>{{ element }}</div>

</template>

</draggable>

</div>

</template>

<script setup>

import { ref } from "vue";

import draggable from "vuedraggable";

const drag = ref(false);

const cars = ref(["Mercedes", "Toyota", "Honda", "Dodge"]);

</script>

6. VueFire

插件门牌号：https://vuefire.vuejs.org/

Firebase 是两个后端即服务（BaaS）平台，为开发人员提供更多各种工具和服务，用作构筑和部署全栈应用领域。有了 Firebase，你就能通过最少的 JavaScript 标识符来实现许多 Vue.js 插件的后端机能。但是，将 Firebase 数据库加进到插件中可能会有一定的压力。Vuefire 是两个非常有协助且轻量级的包装器，可随心所欲地将数据与 Firebase 数据库保持同步。它消除了手动操作的麻烦，并具有许多漂亮的内置逻辑，能协助完成困难的工作。

安装

#yarn

yarn add vuefire firebase

#npm

npm install vuefire firebase

用语

在采用 VueFire 之前，确保拥有 Firebase 帐户和项目增设。

请记住，有两种不同的数据库：Database 和 Firestore 假设，他们想通过 Firebase 建立两个 todo Vue.js 插件。那么需要增设 firestore 数据库。

具体来说他们在 Firebase 上建立两个项目来获取插件凭据。

随着项目启动和运行，那时能增设 firestore 数据库了。

建立名为todos的第两个集合。

增设完 Firebase Firsestore Collection 之后，就能采用 Vuefire 了。

import { initializeApp } from firebase/app

import { getFirestore, collection } from firebase/firestore

// ... other firebase imports

export const firebaseApp = initializeApp({

// your application settings from Firebase

})

// used for the firestore refs

const db = getFirestore(firebaseApp)

// here we can export reusable database references

export const todosRef = collection(db, todos)

<script setup>

import { useCollection } from vuefire

import { collection } from firebase/firestore

const todos = useCollection(collection(db, todos))

const someTodo = useDocument(doc(collection(db, todos), someId))

</script>

<template>

<ul>

<li v-for="todo in todos" :key="todo.id">

<span>{{ todo.text }}</span>

</li>

</ul>

</template>

7. vue3-google-signin

插件门牌号：https://vue3-google-signin.syetalabs.io/

加密是任何插件处理敏感数据的两个重要方面。无论是银行app还是社交媒体平台，采用者都希望确保他们的信息是安全的。在国外，Google 登录是常用的加密机制，允许采用者采用其 Google 凭证登录应用领域，这样做不但能节约时间，还能提供更多更无缝的采用者体验。

对于在 Vue 3 项目中实现 Google Sign-In，vue3-google-signin 就是一种简单且可自订的实现方式。从显示 Google 登录按键到获取和管理采用者加密令牌，vue3-google-signin 将处理整个加密流程，因此细节方面无须费心。

安装

//npm

npm install -S vue3-google-signin

//yarn

yarn add vue3-google-signin

//pnpm

pnpm add vue3-google-signin

很好，然后他们能采用采用者的谷歌帐户凭据在插件中对采用者进行加密。

用语

增设库轻而易举。你所需要做的就是将下列标识符加进到插件的入口点（main.js 或 main.ts）。

import GoogleSignInPlugin from "vue3-google-signin"

app.use(GoogleSignInPlugin, {

clientId: CLIENT ID OBTAINED FROM GOOGLE API CONSOLE,

});

// other config

app.mount("#app");

就是这样！那时让他们谷歌登录插件。他们能采用下列标识符将谷歌登录按键加进到模块：

<script setup lang="ts">

import {

GoogleSignInButton,

type CredentialResponse,

} from "vue3-google-signin";

// handle success event

const handleLoginSuccess = (response: CredentialResponse) => {

const { credential } = response;

console.log("Access Token", credential);

};

// handle an error event

const handleLoginError = () => {

console.error("Login failed");

};

</script>

<template>

<GoogleSignInButton

@success="handleLoginSuccess"

@error="handleLoginError"

></GoogleSignInButton>

</template>

还能试试 Google 新的 One Tap 加密，假如对话框的由此可见性仅限于采用者登录插件，则在侧面显示两个小对话框或弹出窗口。

import { useOneTap, type CredentialResponse } from "vue3-google-signin";

useOneTap({

onSuccess: (response: CredentialResponse) => {

console.log("Success:", response);

},

: () => console.error("Error with One Tap Login"),

// options

});

总结

最后，Vue 3 是两个强悍的 JavaScript 框架，他们能够建立更让人不可思议的采用者介面和插件。借助本文中提到的插件和库，他们能简化工作流程并在更短的时间获得更佳的结果。返回搜狐，查看更多

责任编辑：