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">
                        <v-list-item-content>
                            {{menu.value}}
                        </v-list-item-content>
                    </v-list-item>
                    <v-divider :key="`divider-${i}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar app dark>
            <v-app-bar-nav-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <v-img src="https://assets.logrocket.io/img/logo.png" max-width="120px" max-height="25px"></v-img>
            <v-btn flat class="hidden-sm-and-down">Pricing</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down">Customers</v-btn>
            <v-btn flat class="hidden-sm-and-down">Docs</v-btn>
            <v-btn flat class="hidden-sm-and-down">Blog</v-btn>
            <v-btn flat class="hidden-sm-and-down">Login</v-btn>
            <v-btn color="purple darken-3" class="hidden-sm-and-down">Sign Up</v-btn>
        </v-app-bar>
    </span>
</template>
​
<script>
export default {
    name: 'RocketNavigation',
    data() {
        return {
            drawer: false,
            menus: [
                { value: 'Pricing' },
                { value: 'Customers' },
                { value: 'Docs' },
                { value: 'Blog' },
                { value: 'Login' },
                { value: 'Sign Up' }
            ]
        };
    }
};
</script>
​
<style scoped>
</style>
<template>
    <span>
        <v-navigation-drawer app v-model="drawer">
            <v-list>
                <template v-for="(menu, i) in menus">
                    <v-list-item :key="i">
                        <v-list-item-content>
                            {{menu.value}}
                        </v-list-item-content>
                    </v-list-item>
                    <v-divider :key="`divider-${i}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar app dark>
            <v-app-bar-nav-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <v-img src="https://assets.logrocket.io/img/logo.png" max-width="120px" max-height="25px"></v-img>
            <v-btn flat class="hidden-sm-and-down">Pricing</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down">Customers</v-btn>
            <v-btn flat class="hidden-sm-and-down">Docs</v-btn>
            <v-btn flat class="hidden-sm-and-down">Blog</v-btn>
            <v-btn flat class="hidden-sm-and-down">Login</v-btn>
            <v-btn color="purple darken-3" class="hidden-sm-and-down">Sign Up</v-btn>
        </v-app-bar>
    </span>
</template>
​
<script>
export default {
    name: 'RocketNavigation',
    data() {
        return {
            drawer: false,
            menus: [
                { value: 'Pricing' },
                { value: 'Customers' },
                { value: 'Docs' },
                { value: 'Blog' },
                { value: 'Login' },
                { value: 'Sign Up' }
            ]
        };
    }
};
</script>

第一个标签是指在 Vue 中创建的模板的定义。此标记要求仅将一个子元素添加到层次结构中；否则，我们会收到一个错误。为了绕过这个检查，我们可以添加一个<span>或任何其他中性 HTML 元素来封装其他元素。要使桌面可视化组件共存，我们需要<v-navigation-drawer>移动可视化和<v-app-bar>.

让我们回顾一下其他一些重要的考虑因素。我们app在两个组件中都使用了该指令，以便 Vuetify 在更全局的层面上理解它们属于应用程序，即如何相对于父元素调整它们的大小和重新调整它们。

v-model定义我们使用的模型类型，在本例中为抽屉。这个元素很重要，这样菜单列表就不会像挂起一样出现。提供商品的 JavaScript 代码位于列表的末尾。

您的其余内容表示一个循环，该循环遍历菜单元素，在元素中预定义menus。在这里，我们使用[](https://vuetifyjs.com/en/components/lists/)组件来迭代和组合标题子元素，<v-list-title>而<v-divider>.

在<v-app-bar>元素中，我们使用 dark 指令来导入 Vuetify 的默认夜间样式。该<v-app-bar-nav-icon>组件代表我们的汉堡图标。当然，它应该只在我们在移动模式下查看应用程序时出现，这就是为什么工具栏的所有元素都接收Material Design Viewport Breakpoints的 CSS 类的原因。

这是 Vuetify 基于当前视口控制元素显示的默认机制。请参阅下面每个 Vuetify 前缀的官方尺寸：

这些条件遵循hidden-{breakpoint}-{condition}格式。

在hidden-md-and-up类中，断点将视口大小设置md 为中型设备，条件应用基于and-up. 换句话说，它通过断点隐藏指定断点上的元素md，以及更大的元素。工具栏的其余元素则相反。当设备视口较小或较低时，它们将被隐藏， .lgxlsm``down

对于颜色，Vuetify 提供了一个预定义的调色板，您可以通过 CSS 类使用它。最后，该@click属性定义单击汉堡图标将触发导航抽屉的激活。否则点击不会生效。值得记住的是效果是一个切换。

身体

现在，让我们为定价计划创建第二个模板，正文。为此，请plans.vue在同一目录中创建一个名为的新文件并添加以下代码：

<template>
    <v-container grid-list-lg>
        <v-row column>
            <v-col class="text-xs-center display-1 my-5">Pricing</v-col>
            <v-col class="text-xs-center display-1 font-weight-black">Plans that scale with your user growth</v-col>
        </v-row>
        <v-row row wrap>
            <v-col>
                <v-card>
                    <v-img :src="images.rocket1" height="300px">
                        <v-container fluid>
                            <v-row>
                                <v-col flexbox>
                                    <span class="subheading purple white--text px-1 py-1">DEVELOPER</span>
                                </v-col>
                                <v-btn small>Try it</v-btn>
                            </v-row>
                        </v-container>
                    </v-img>
​
                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline">Developer</h3>
                            <ul>
                                <li>Includes 1,000 sessions / mo</li>
                                <li>14 day data retention</li>
                            </ul>
                        </div>
                    </v-card-title>
                </v-card>
            </v-col>
​
            <v-col>
                <v-card>
                    <v-img :src="images.rocket2" height="300px">
                        <v-container fluid>
                            <v-row fill-height>
                                <v-col flexbox>
                                    <span class="subheading purple white--text px-1 py-1">TEAM</span>
                                </v-col>
                                <v-btn small>Try it</v-btn>
                            </v-row>
                        </v-container>
                    </v-img>
                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline">Team</h3>
                            <ul>
                                <li>Starting at 10,000 sessions / mo</li>
                                <li>Starting at 1 month retention</li>
                            </ul>
                        </div>
                    </v-card-title>
                </v-card>
            </v-col>
​
            <v-col>
                <v-card>
                    <v-img :src="images.rocket3" height="300px">
                        <v-container fluid>
                            <v-row fill-height>
                                <v-col flexbox>
                                    <span class="subheading purple white--text px-1 py-1">PROFESSIONAL</span>
                                </v-col>
                                <v-btn small>Try it</v-btn>
                            </v-row>
                        </v-container>
                    </v-img>
                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline">Professional</h3>
                            <ul>
                                <li>Any volume of Sessions</li>
                                <li>Custom data retention</li>
                                <li>On-premise available</li>
                            </ul>
                        </div>
                    </v-card-title>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>
​
<script>
export default {
    name: 'RocketPlans',
     data() {
        return {
            images: {
                rocket1: require('../assets/rocket_1.jpg'),
                rocket2: require('../assets/rocket_2.jpg'),
                rocket3: require('../assets/rocket_3.jpg')
            }
        }
    }
};
</script>

Vuetify 带有一个强大的 12 点网格系统，您可以使用它来制作 Web 应用程序。网格系统建立在 CSS Flexbox 之上，它提供了五个媒体查询断点，您可以使用它们来定位特定的屏幕尺寸：

• XS: 屏幕尺寸小于 600 像素

• sm：屏幕尺寸介于 600 像素和 960 像素之间

• md：屏幕尺寸在 960 像素和 1264 像素之间

• lg：屏幕尺寸介于 1264 像素和 1904 像素之间

• xl: 屏幕尺寸大于 1264px

网格系统提供以下组件：

• v-container：可用于将内容集中在页面上

• v-row: 的包装组件v-col。它有一个 24px 的标准间距，并使用 Flexbox 来控制其子列的布局

• v-col：必须是 的直接子级的内容持有者v-row。v-col允许您指定跨五个断点的列宽，当没有指定列宽时，它将呈现等宽的列

• v-spacer: 一个间距组件，既可以用来填充可用空间，也可以在子组件之间留出空间

我们的容器是一个简单的、水平对齐的 CSS Grid。容器中的第一项是一列，<v-row>. 我快速将页面中心的两个文本与以下道具对齐：

• text-cs-center: 将水平 x 轴上的文本与中心对齐

• display-1: Vuetify 排版的默认<h4>元素大小

• my-5: Vuetify 边距的间距设置。这里，m来自边缘，y来自垂直 y 轴。根据材料设计规范，规模范围从0到5

• font-weight-black: Vuetify 字体的字体粗细；将字体粗细设置为900

下一个布局是由三张卡片组成的一行。每张卡片由 a 表示<v-card>，由两个主要元素组成，一个图像和一个标题。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

在 Vuetify 中，图像 ,<v-img>由组件组成，这些组件与src可能在外部托管的图像一起使用并直接指向该图像。

要在本地访问文件，就像在我们的例子中一样，您需要将它们中的每一个公开为data具有各自相对于assets文件夹的路径的属性；请参阅清单末尾的脚本。您可以在本文开头的 GitHub 项目链接中访问图像文件。

在每个图像中，我们container使用fluidprop 创建另一个图像，它将容器的 扩展width为与父容器相同。每个容器将包含一个span带有每张卡片标题的文本和一个号召性用语按钮。在这里，我们使用了更多的道具subheading和对齐方式。px-1代表1out of的水平填充值5。

该<v-card-title>组件定义了卡片的内容，通常是标题和描述，但它可能包含其他元素，如按钮。在移动模式下查看时，Vuetify 将垂直重新排列卡片。

页脚

要创建页脚，请转到项目的组件目录并创建footer.vue文件。添加以下代码：

<template>
  <v-footer height="auto" dark>
    <v-row justify-center row wrap>
      <v-col lighten-2 py-3 text-xs-center white--text>
        &copy;2019 — <strong>LogRocket // Vuetify</strong>
      </v-col>
    </v-row>
  </v-footer>
</template>
​
<script>
  export default {
    name: 'RocketFooter'
  }
</script>

我们的简单页脚由我们之前讨论过的项目组成。对于每个.vue文件，我们需要定义每个模板的名称，即它们将如何被外部识别。

主页

对于主页，我们将使用App.vue已经创建的文件。向其中添加以下代码：

<template>
    <v-app>
        <rocket-navigation></rocket-navigation>
        <rocket-plans></rocket-plans>
        <rocket-footer></rocket-footer>
    </v-app>
</template>
​
<script>
import RocketNavigation from '@/components/navigation';
import RocketPlans from '@/components/plans';
import RocketFooter from '@/components/footer';
export default {
    name: 'LogRocketApp',
    components: {
        RocketNavigation,
        RocketPlans,
        RocketFooter
    }
};
</script>

Vue 需要<v-app>标签，它集中了构成其应用程序的其他元素。

实现的其余部分相对简单。我们所要做的就是通过import x from y指令导入其他组件文件并像往常一样导出它们。请注意，在模板中使用它之前，我们必须对每个标签进行连字符。因此，Vuetify 可以识别每个驼峰式案例是如何翻译的。

结论

在开始使用新框架时，需要考虑许多因素。Vuetify 的优点是很多优点和缺点都已经被 Vue 自己吸收了。您必须分析项目的真正需求。正如我们之前提到的，如果您依赖设计本身，Vuetify 可能不适合您的项目。但如果是这样，您将拥有一个高效且功能强大的工具来创建令人惊叹的网页。

你用过 Vuetify 吗？如果有，体验如何？随时在评论中留下您的反馈。你可能会帮助有类似项目的人。快乐编码！