七個超級實用的 Vue 3 插件和庫

作者：前端新世 2023-03-29 07:54:25

Vue 3 是一個強大的 JavaScript 框架，我們能夠創建令人難以置信的用戶界面和應用程序。借助本文中提到的插件和庫，我們可以簡化工作流程并在更短的時間獲得更佳的結果。

想要在 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 元素，而無需從頭開始編寫所有 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 card's 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 element's 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);
  },
  onError: () => console.error("Error with One Tap Login"),
  // options
});

總結

總而言之，Vue 3 是一個強大的 JavaScript 框架，我們能夠創建令人難以置信的用戶界面和應用程序。借助本文中提到的插件和庫，我們可以簡化工作流程并在更短的時間獲得更佳的結果。

責任編輯：武曉燕來源：前端新世

Vue 3 插件庫

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看