Vuetify 入门：Vuetify 适合您吗？

随着 Web 应用程序中可视化组件封装新框架的引入，其他几个需求也得到了强调，包括路由、安全性、SPA 和 PWA 支持、国际化，当然还有 UI。

Vue 也是如此，它已被广泛用于开发 Web 应用程序和混合移动应用程序。xx文库下载器，百度付费文档全部免费下载，突破文库VIP限制！虽然 Vue 非常关注组件逻辑和整个应用程序，但开发人员需要使用其他类型的 UI 库或框架来为页面添加样式和设计。

在处理自定义和促进视觉组件和屏幕设计的众多 UI 框架中，有几个框架采用了著名的Material Design标准。社区已广泛接受此选项，因为它包含具有响应性、灵活性和可扩展性的桌面和移动领域。

由于大多数使用这两种范式的开发人员已经熟悉它们的使用，为什么不将两者结合在一起呢？于是，Vuetify诞生了，将 Vue 与Materialise趋势相结合。在本文中，我们将探索 Vuetify，学习如何设置、自定义并探索其功能。

您可以从我的 GitHub 存储库访问本文的完整源代码。让我们开始吧！

• 什么是 Vuetify？

• 安装和设置 Vuetify

• 自定义 Vuetify 页面

  • 导航

  • 正文：定价计划

  • 页脚

什么是 Vuetify？

Vuetify 符合 Material Design 规范，这意味着 Vue 和 Material 的核心特性都是默认可用的，并且两个社区都可以对其进行改进。此外，Vuetify 还提供以下功能：

• 与 Vue CLI-3 和 RTL 的兼容性

• 各种框架的模板，如 Cordova、webpack 等。

• 国际化

• SSR 和 PWA

使用Vuetify 意味着您必须接受 Material Design。因此，适用于 iOS 世界的应用程序不适合 Vuetify。同样，如果您需要针对整体风格进行定制设计，Vuetify 也可能不适合您。与往常一样，您仍然需要对项目需求进行更深入的事先分析。

为了更好地理解 Vuetify 的工作原理，我们将从头开始创建一个简单的、响应式的、基于 Material 的页面，其中包含LogRocket 定价页面中的元素，定价菜单中的计划选择：

请注意，元素的布局非常直观，卡片的模板让人想起 Bootstrap 如何使用网格。

安装和设置 Vuetify

让我们从布置项目所需的一切开始。首先，您需要在您的机器上安装最新版本的 npm 。在本教程中，我们使用 Node.js v14.17.4 和 npm v6.14.14。为了更好地管理您的 Node.js 版本，您可以使用 nvm。

要全局安装 Vue CLI，首先，您需要检查您是否已经安装了之前的版本。包名称从 更改vue-cli为@vue/cli。尝试运行以下命令以全局卸载旧包：

npm uninstall -g vue-cli

然后，运行以下命令来安装正确的包：

npm install -g @vue/cli

使用以下命令检查安装的版本：

vue --version

上面的命令应该打印版本如下：

@vue/cli 4.5.13

接下来，我们将搭建我们的应用程序并使用一系列预设文件让我们的生活更轻松，例如.vue模板文件index.html、和main.js：

vue create vuetify-logrocket

安装指南将询问您要使用哪些 JavaScript 和 lint 编译器预设：

让我们暂时保留默认选项，然后选择Enter继续。等待安装完成，然后cd进入创建的应用程序的目录。运行以下命令将 Vuetify 添加到您的项目中：

cd vuetify-logrocket
vue add vuetify

等到安装将您带到下一个预设选择，这次来自 Vuetify：

保留预设并等待安装完成。下图显示了添加插件后的输出：

要启动应用程序，只需运行npm run serve命令。这样做将导致文件更改观察程序启动并收听我们的编辑，自动更新页面：

自定义 Vuetify 页面

在继续本教程之前，我建议阅读官方文档中有关 Vuetify 的一些基本组件的信息。

我们不会使用 Vuetify 生成的任何内容App.vue，因此您可以删除所有内容。我们将从构建屏幕的第一部分开始，包括导航、正文和页脚部分。

导航

导航将包括工具栏和菜单。当通过桌面查看时，我们的应用程序将遵循深度菜单显示模式，以及navigation drawer在智能手机上使用汉堡图标模板查看的移动应用程序和网站所共有的模式。

下图显示了我们的网站在 iPhone 上的显示方式：

navigation.vue首先，在文件夹中创建一个名为的新文件/src/components/并添加以下代码：

<template>
    <span>
        <v-navigation-drawer app v-model="drawer">
            <v-list>
                <template v-for="(menu, i) in menus">
                    <v-list-item :key="i">