亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

想要在 2023 年構(gòu)建出色的 Vue.js 應(yīng)用程序嗎？如果你的回答是 YES，那么一定要試一試這篇文章整理的 7 個 Vue 3 插件和庫。無需編寫大量代碼，這些令人難以置信的插件和庫就可以為應(yīng)用程序添加超棒的特性和功能。

這些插件和庫，囊括動畫、身份驗證、性能優(yōu)化等各個方面，所以如果你想用 Vue 3 創(chuàng)建令人驚嘆的 web App，可千萬不要錯過哦！

1. Vuetify

插件地址：https://vuetifyjs.com/en/

 

 

Vuetify 是一個強大而靈活的 Vue.js UI 庫，可以幫助為 web 應(yīng)用程序構(gòu)建美觀且響應(yīng)迅速的用戶界面。Vuetify 提供了一系列預(yù)構(gòu)建的 UI 組件和樣式，可在構(gòu)建 Vue.js 應(yīng)用時節(jié)省我們的時間和精力。

有了 Vuetify，你就可以輕松創(chuàng)建響應(yīng)式布局、排版、圖標、按鈕、表單、表格和許多其他 UI 元素，而無需從頭開始編寫所有 css 和 html。該庫還包括指令、主題自定義、國際化和可訪問性等高級功能，可幫助創(chuàng)建更具交互性、包容性和用戶友好的web應(yīng)用程序。

安裝

 

# 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')

在項目中設(shè)置完 Vuetify 之后，讓我們在應(yīng)用程序中添加一些基本的 Vuetify 組件。

首先將以下代碼添加到 main.js 或 main.ts 文件中

import * as components from 'vuetify/components'

現(xiàn)在可以在自己的組件中使用 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'

現(xiàn)在我們來嘗試一些指令：

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指令在單擊目標元素之外的內(nèi)容時調(diào)用函數(shù)。用于v-menu（Vuetify 菜單組件）和v-dialog（Vuetify 對話框組件）等組件內(nèi)部。

<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+ 個基本實用程序函數(shù)的集合，用于與瀏覽器、狀態(tài)、網(wǎng)絡(luò)、動畫、時間等各種 API 進行交互，這些函數(shù)可以輕松導(dǎo)入并在 Vue.js 組件中使用。因此，無需編寫太多代碼就可以添加訪問本地存儲、使用全屏、單擊元素外部等功能。只需組合導(dǎo)入，即可使用。

安裝

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中存儲數(shù)據(jù)的響應(yīng)式方法。因此可以實時查看本地存儲和會話存儲中的更新數(shù)據(jù)。

//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元素可拖動，并且還提供有關(guān)元素移動時 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>

上面的代碼中，當鏈接的元素在屏幕上可見時會觸發(fā)事件。這是一項非常簡便的技術(shù)，用于創(chuàng)建一個動畫觸發(fā)器。

VueUse中有很多組合用法，如果你感興趣，也可以更深入地研究這方面的知識。

3. vue-toast-notification

插件地址：https://Github.com/ankurk91/vue-toast-notification

 

 

向用戶顯示通知的重要性眾所周知。通知向用戶提供有關(guān)其操作成功或失敗的即時反饋，使用戶體驗更加直觀。

vue-toast-notification 插件簡化了在 Vue.js 應(yīng)用中顯示通知的過程。它提供了一個易于使用且高度可定制的通知系統(tǒng)，可以快速集成到項目中。

安裝

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 應(yīng)用的關(guān)鍵部分，用于捕獲用戶輸入和啟用交互。表單可以是簡單的，也可以是復(fù)雜的，用于注冊、數(shù)據(jù)收集和電子商務(wù)等任務(wù)。表單可改善用戶體驗和系統(tǒng)功能，并且可以針對驗證、錯誤處理和樣式進行自定義。但眾所周知，表單處理起來是有難度的，尤其是當它們變得越來越復(fù)雜時。FormKit 提供了一組實用程序，使我們能夠輕松地在 Vue.js 應(yīng)用程序中構(gòu)建和管理表單，可操作范圍包括從簡單的輸入驗證到諸如條件邏輯和動態(tài)表單字段等高級功能。

安裝

npm install @formkit/vue

用法

應(yīng)用程序中的 formkit 用例并不少，我們先從一個示例開始。首先在 Vue 3 應(yīng)用程序中設(shè)置 Formkit。

import { createApp } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'
import App from 'App.vue'

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

將 FormKit 導(dǎo)入到全局的 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>

 

 

這是一個關(guān)于如何使用 Formkit 的簡單示例。Formkit 是一個非常強大的平臺。如果你對使用 FormKit 構(gòu)建強大的表單感興趣，那么嘗試 Formkit 一定不會讓你失望。

5. Vue-draggable

插件地址：https://github.com/SortableJS/vue.draggable.next

 

 

將拖放功能添加到 Vue.js 應(yīng)用可以改善用戶體驗。因為拖放功能允許用戶以更直觀的方式與應(yīng)用程序交互，所以用戶可以更輕松地組織和操作數(shù)據(jù)。Vue-draggable 是實現(xiàn)拖放功能的絕佳工具，因為它簡化了流程，即使是剛接觸 Vue.js 的開發(fā)人員也可以輕松使用。將這個插件添加到 Vue.js 應(yīng)用程序，你就可以創(chuàng)建更具吸引力和動態(tài)的用戶體驗，提高用戶回頭率。

安裝

#yarn
yarn add vuedraggable@next

#npm
npm i -S vuedraggable@next

用法

讓我們用 Vue-draggable 創(chuàng)建一個簡單的可排序列表。

<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 是一個后端即服務(wù)（BaaS）平臺，為開發(fā)人員提供各種工具和服務(wù)，用于構(gòu)建和部署全棧應(yīng)用。有了 Firebase，你就可以通過最少的 JAVAScript 代碼來實現(xiàn)許多 Vue.js 應(yīng)用程序的后端功能。但是，將 Firebase 數(shù)據(jù)庫添加到應(yīng)用程序中可能會有一定的壓力。Vuefire 是一個非常有幫助且輕量級的包裝器，可輕松地將數(shù)據(jù)與 Firebase 數(shù)據(jù)庫保持同步。它消除了手動操作的麻煩，并具有一些漂亮的內(nèi)置邏輯，可以幫助完成困難的工作。

安裝

#yarn
yarn add vuefire firebase

#npm
npm install vuefire firebase

用法

在使用 VueFire 之前，確保擁有 Firebase 帳戶和項目設(shè)置。

• 請記住，有兩種不同的數(shù)據(jù)庫：Database 和 Firestore
• 假設(shè)，我們想通過 Firebase 創(chuàng)建一個 todo Vue.js 應(yīng)用程序。那么需要設(shè)置 firestore 數(shù)據(jù)庫。

首先我們在 Firebase 上創(chuàng)建一個項目來獲取應(yīng)用程序憑據(jù)。

 

 

隨著項目啟動和運行，現(xiàn)在可以設(shè)置 firestore 數(shù)據(jù)庫了。

 

 

創(chuàng)建名為todos的第一個集合。

 

 

設(shè)置完 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/

 

 

身份驗證是任何應(yīng)用程序處理敏感數(shù)據(jù)的一個重要方面。無論是銀行app還是社交媒體平臺，用戶都希望確保他們的信息是安全的。在國外，Google 登錄是常用的身份驗證機制，允許用戶使用其 Google 憑證登錄應(yīng)用，這樣做不但可以節(jié)省時間，還能提供更無縫的用戶體驗。

對于在 Vue 3 項目中實現(xiàn) Google Sign-In，vue3-google-signin 就是一種簡單且可自定義的實現(xiàn)方式。從顯示 Google 登錄按鈕到獲取和管理用戶身份驗證令牌，vue3-google-signin 將處理整個身份驗證流程，因此細節(jié)方面無需費心。

安裝

//npm
npm install -S vue3-google-signin

//yarn
yarn add vue3-google-signin

//pnpm
pnpm add vue3-google-signin

很好，然后我們可以使用用戶的谷歌帳戶憑據(jù)在應(yīng)用程序中對用戶進行身份驗證。

用法

設(shè)置庫輕而易舉。你所需要做的就是將以下代碼添加到應(yīng)用程序的入口點（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");

就是這樣！現(xiàn)在讓我們谷歌登錄應(yīng)用程序。我們可以使用以下代碼將谷歌登錄按鈕添加到組件：

<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 身份驗證，如果對話框的可見性僅限于用戶登錄應(yīng)用程序，則在側(cè)面顯示一個小對話框或彈出窗口。

import { useo

 

 

總結(jié)

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