广州蓝景分享

# 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

Button

//an autocomplete extends a select input with autocomplete features

你也可以用 Vuetify 将指令附加到组件上。让我们将以下代码块也附加到 main.js 或 main.ts 文件中：

import * as directives from 'vuetify/directives'

现在我们来尝试一些指令：

v-intersect指令利用 Intersection Observer API。它提供了一个易于使用的界面，用于检测元素何时在用户视口中可见。

//v-intersect

Card title

This is the card's subtext

import {ref} from 'vue'

const isIntersected = ref(false)

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

isIntersected.value = isIntersecting

},

v-click-out指令在单击目标元素之外的内容时调用函数。用于v-menu（Vuetify 菜单组件）和v-dialog（Vuetify 对话框组件）等组件内部。

{{ active ? 'Click Outside' : 'Click Me' }}

import {ref} from 'vue'

const active = ref(false)

const onClickOutside = () => {

active.value = false

},

},

2. VueUse

VueUse 提供了 200+ 个基本实用程序函数的集合，用于与浏览器、状态、网络、动画、时间等各种 API 进行交互，这些函数可以轻松导入并在 Vue.js 组件中使用。因此，无需编写太多代码就可以添加访问本地存储、使用全屏、单击元素外部等功能。只需组合导入，即可使用。

安装

npm i @vueuse/core

用法

// reactive localStorage

import { useStorage } from '@vueuse/core'

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

上面的代码提供了一种在浏览器的localStorage或sessionStorage中存储数据的响应式方法。因此可以实时查看本地存储和会话存储中的更新数据。

//create a draggable element

import { ref } from 'vue'

import { useDraggable } from '@vueuse/core'

const el = ref(null)

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

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

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

})

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

上面的代码使el元素可拖动，并且还提供有关元素移动时 x 轴和 y 轴屏幕位置的实时信息。

//Detects that a target element's visibility.

Hello world

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,

}

},

}

上面的代码中，当链接的元素在屏幕上可见时会触发事件。这是一项非常简便的技术，用于创建一个动画触发器。

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

3. 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

表单是 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 的简单示例。Formkit 是一个非常强大的平台。如果你对使用 FormKit 构建强大的表单感兴趣，那么尝试 Formkit 一定不会让你失望。

5. Vue-draggable

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

安装

#yarn

yarn add vuedraggable@next

#npm

npm i -S vuedraggable@next

用法

让我们用 Vue-draggable 创建一个简单的可排序列表。

{{ element }}

import { ref } from "vue";

import draggable from "vuedraggable";

const drag = ref(false);

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

6. VueFire

Firebase 是一个后端即服务（BaaS）平台，为开发人员提供各种工具和服务，用于构建和部署全栈应用。有了 Firebase，你就可以通过最少的 JavaScript 代码来实现许多 Vue.js 应用程序的后端功能。但是，将 Firebase 数据库添加到应用程序中可能会有一定的压力。Vuefire 是一个非常有帮助且轻量级的包装器，可轻松地将数据与 Firebase 数据库保持同步。它消除了手动操作的麻烦，并具有一些漂亮的内置逻辑，可以帮助完成困难的工作。

安装

#yarn

yarn add vuefire firebase

#npm

npm install vuefire firebase

用法

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

首先我们在 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')

import { useCollection } from 'vuefire'

import { collection } from 'firebase/firestore'

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

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

{{ todo.text }}

7. vue3-google-signin

身份验证是任何应用程序处理敏感数据的一个重要方面。无论是银行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");

就是这样！现在让我们谷歌登录应用程序。我们可以使用以下代码将谷歌登录按钮添加到组件：

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");

};

还可以试试 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 框架，我们能够创建令人难以置信的用户界面和应用程序。借助本文中提到的插件和库，我们可以简化工作流程并在更短的时间获得更佳的结果。返回搜狐，查看更多