vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序

最新推荐文章于 2022-11-01 19:31:50 发布

cumi7754

最新推荐文章于 2022-11-01 19:31:50 发布

阅读量671

点赞数

文章标签： python java html vue web ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-build-a-single-page-application-using-vue-js-vuex-vuetify-and-firebase-838b40721a07/

版权

vuex构建vue项目

如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue Router)

Do you want to learn how to use Vue.js? Want to create a realistic website using Vue.js? In this tutorial, I will teach you how to create a meal delivery website using Vue, Vuex, Vue Router, Vuetify, and Firebase.

您是否想学习如何使用Vue.js？是否想使用Vue.js创建一个现实的网站？在本教程中，我将教您如何使用Vue，Vuex，Vue Router，Vuetify和Firebase创建送餐网站。

This tutorial is presented as a series of articles that will take you from installing Vue for the first time to creating a fully functional meal delivery website. The header image above shows the website that we will be creating.

本教程以一系列文章的形式呈现，这些文章将带您从第一次安装Vue到创建功能全面的送餐网站。上方的图片显示了我们将要创建的网站。

This tutorial is broken down into a four-part series. Here are the links to each part of the series:

本教程分为四个部分。以下是该系列各部分的链接：

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

第1部分：使用Vuetify和Vue路由器安装Vue并构建SPA

Part 2: Using Vue Router

第2部分：使用Vue路由器

Part 3: Using Vuex and accessing API

第3部分：使用Vuex和访问API

Part 4: Using Firebase for Authentication

第4部分：使用Firebase进行身份验证

This tutorial is suitable for everyone regardless of your skill level. I only assume that you have a knowledge of ES6.

无论您的技术水平如何，本教程都适合所有人。我仅假设您具有ES6知识。

Let’s get started.

让我们开始吧。

安装Vue (Installing Vue)

Creating a new application using Vue.js is done through their command line interface (CLI). You will need to install the CLI first with this command:

使用Vue.js创建新应用程序是通过其命令行界面(CLI)完成的。您首先需要使用以下命令安装CLI：

npm install -g @vue/cli

The -g flag tells npm to install the CLI globally. Once it is installed the CLI can be accessed by using the command vue in the terminal. Running this will show the commands available:

-g标志告诉npm全局安装CLI。安装完成后，可以使用终端中的命令vue访问CLI。运行此命令将显示可用的命令：

NOTE: If you have read other articles about Vue, you might see them talking about doing an install of the CLI with this command:

注意： 如果您已经阅读了有关Vue的其他文章，则可能会看到他们谈论使用此命令安装CLI：

npm install -g vue-cli

That installed the old version of the Vue CLI. At the time of the writing of this tutorial, the current version of the Vue CLI is version 3. To install the latest version use the first command that I gave.

那安装了旧版本的Vue CLI。 在撰写本教程时，Vue CLI的当前版本为版本3。要安装最新版本，请使用我提供的第一个命令。

创建我们的膳食准备应用程序 (Creating Our Meal Prep Application)

Now that we have installed the CLI, the next step is to create the scaffolding for our Vue application. From your terminal enter this command:

现在我们已经安装了CLI，下一步是为我们的Vue应用程序创建支架。在终端上输入以下命令：

vue create meal-prep

The Vue CLI will ask a series of questions to determine how to scaffold out your application. At the first prompt, you want to select “Manually select features”.

Vue CLI将询问一系列问题，以确定如何搭建您的应用程序。在第一个提示下，您要选择“手动选择功能”。

Next we will be asked to select the features we want to install for our application. For this tutorial select Babel, Router, Vuex and Linter/Formatter.

接下来，将要求我们选择要为应用程序安装的功能。对于本教程，请选择Babel，Router，Vuex和Linter / Formatter。

Next you will be asked a series of questions.

接下来，将询问您一系列问题。

For the linter I selected Prettier and selected to Lint on save. I selected the configuration files should be placed in my package.json file instead of in separate configuration files.

对于短毛猫，我选择了Prettier，然后选择保存时为Lint 。我选择了将配置文件放置在package.json文件中，而不是放置在单独的配置文件中。

Here are the options that I selected:

这是我选择的选项：

The Vue CLI will scaffold our application using the features that you have selected. Since I told it to create an application named “meal-prep” then it will create a new folder with this name.

Vue CLI将使用您选择的功能来搭建我们的应用程序。自从我告诉它创建一个名为“ meal-prep”的应用程序以来，它将使用该名称创建一个新文件夹。

Once the CLI has successfully created the application, it will give you the command to change into the newly created directory and the command you will need to run to start your application:

CLI成功创建了应用程序之后，它将为您提供切换到新创建目录的命令以及启动应用程序所需的命令：

开始我们的申请 (Starting our application)

To start our application, we will need to cd into the meal-prep directory and run the command npm run serve. Here is what our application looks like:

要启动我们的应用程序，我们将需要cd进入餐前准备目录并运行命令npm run serve 。这是我们的应用程序的外观：

Vue scaffolded out a SPA application for us and installed Vue Router and Vuex. We can see the Vue Router in action by clicking on About in the menu at the top of the page. This loads the About page.

Vue为我们搭建了SPA应用程序，并安装了Vue Router和Vuex。通过单击页面顶部菜单中的关于，我们可以看到正在运行的Vue路由器。这将加载“ 关于”页面。

添加Vuetify (Adding Vuetify)

Vuetify is a material design component framework. It is similar to Bootstrap. Vuetify provides 80+ material design components that we can use to style our SPA in Vue.

Vuetify是一个材料设计组件框架。它类似于Bootstrap。 Vuetify提供了80多种材料设计组件，可用于在Vue中设置SPA的样式。

To add Vuetify to our application, first, go to your terminal and stop the server. Then add Vuetify to our application with this command:

要将Vuetify添加到我们的应用程序中，首先，请转到您的终端并停止服务器。然后使用以下命令将Vuetify添加到我们的应用程序：

vue add vuetify

You will be asked a series of questions. I am going to choose not to use the pre-made template because I want to keep the structure created by the default Vue application. For the rest of the questions I took the default.

您将被问到一系列问题。我将选择不使用预制模板，因为我想保留默认Vue应用程序创建的结构。对于其余的问题，我采用了默认设置。

Here are my answers to the questions:

这是我对问题的回答：

配置漂亮 (Configuring Prettier)

During the creation of our Vue application, I selected to use Prettier for linting. I also selected to have the configuration setting installed in the package.json file. I want to take time now to configure Prettier to use my preferred settings.

在创建Vue应用程序期间，我选择使用Prettier进行整理。我还选择在package.json文件中安装配置设置。我现在想花点时间配置Prettier以使用我的首选设置。

In your code editor, open the package.json file. In this file you will see the default settings that have been created for eslint. Right after the eslintConfig object and before the postcss object, I am going to add settings to configure Prettier. I am going to set the indent to 4 spaces and to use single quotes. (Notes: if you prefer an indent of 2 spaces and/or to use double quotes then you do not need to add this change.)

在代码编辑器中，打开package.json文件。在此文件中，您将看到为eslint创建的默认设置。在eslintConfig对象之后和postcss对象之前对，我要添加设置来配置更漂亮。我将缩进设置为4个空格并使用单引号。 ( 注意： 如果您希望缩进2个空格和/或使用双引号，则无需添加此更改 。)

Here is the Prettier setting that I have added to my package.json file:

这是我添加到package.json文件中的Prettier设置：

Next I want to reconfigure all the files to use my new Prettier settings. That means changing all indents from 2 spaces to 4 spaces and to change double quotes to single quotes. Luckily Vue provides a lint script that will fix all these issues for me automatically.

接下来，我想重新配置所有文件以使用新的Prettier设置。这意味着将所有缩进从2个空格更改为4个空格，并将双引号更改为单引号。幸运的是，Vue提供了一个皮棉脚本，可以自动为我解决所有这些问题。

From the terminal run this command:

从终端运行以下命令：

npm run lint

This will lint all the files and change them to my new Prettier settings. This command will give you a list of all the files that have been auto-fixed.

这将清除所有文件并将它们更改为我的新Prettier设置。此命令将为您提供所有已自动修复的文件的列表。

设置应用程序主页的样式 (Styling The Home Page of Our Application)

We will be using Vuetify to style our application. You can find more details about all the UI Components that Vuetify offers here.

我们将使用Vuetify设置应用程序样式。您可以在此处找到有关Vuetify提供的所有UI组件的更多详细信息。

All application using Vuetify have to be wrapped with <v-app>. Open up the App.vue file and delete all the code in the template and all the styles. Your App.vue should look like this:

所有使用Vuetify的应用程序都必须用<v-app>包装。打开App.vue文件，然后删除模板中的所有代码和所有样式。您的App.vue应该如下所示：

<template>
    <v-app>
        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
export default {
    name: 'App'
};
</script>

<style>
</style>

This code wraps our application in the <v-app> tag that Vuetify requires. Inside that tag is the <v-content> tag. Inside that is the <router-view> tag. The router view tag will display the current page that you are on. When we are on the home page it will display the Home view. When we navigate to the about page it will display the about view.

此代码将我们的应用程序包装在Vuetify所需的<v-app>标签中。该标签内是<v-content>标签。里面是<router-view>标签。路由器视图标签将显示您当前所在的页面。当我们进入主页时，它将显示“主页”视图。当我们导航到About页面时，它将显示About视图。

创建主页 (Creating the Home Page)

Next open the Home.vue file located in the views folder. We are going to get rid of the code that is there. Remove all the content in the template. Remove the import command for HelloWorld and the comment. Remove the components object.

接下来，打开位于views文件夹中的Home.vue文件。我们将摆脱那里的代码。删除模板中的所有内容。删除HelloWorld和注释的导入命令。删除组件对象。

Here is what we will be creating for the home page:

这是我们将为主页创建的内容：

The first thing we are going to start with is the navigation. I am going to create a new Vue component just for the navigation. In the components folder create a new file called AppNavigation.vue.

我们要开始的第一件事是导航。我将为导航创建一个新的Vue组件。在components文件夹中，创建一个名为AppNavigation.vue的新文件。

Our navigation will have to work on many different screen sizes. On bigger screens like a laptop or desktop, we will display a menu across the top of the screen. On smaller devices like a mobile phone, we will display the traditional hamburger menu icon. When a user click on the icon a drawer will slide in from the left with our menu. This drawer will remain on top of the website until the user closes it.

我们的导航将必须在许多不同的屏幕尺寸上工作。在笔记本电脑或台式机等较大的屏幕上，我们将在屏幕顶部显示一个菜单。在手机等较小的设备上，我们将显示传统的汉堡菜单图标。当用户单击图标时，抽屉将从我们的菜单从左侧滑入。该抽屉将保留在网站顶部，直到用户关闭它。

Vuetify provides two tools to display the menu for different screen sizes. For medium and large screens we will be using the Vuetify <v-toolbar> component. On smaller screens we will show the <v-navigation-drawer> component.

Vuetify提供了两种工具来显示不同屏幕尺寸的菜单。对于中型和大型屏幕，我们将使用Vuetify <v-toolbar>组件。在较小的屏幕上，我们将显示<v-navigation-drawer>组件。

Let’s start by scaffolding out the default configuration for a new Vue component. The AppNavigation.vue file should contain the following code:

让我们从为新的Vue组件搭建默认配置开始。 AppNavigation.vue文件应包含以下代码：

<template>

</template>

<script>
export default {
    name: 'AppNavigation'
};
</script>

<style scoped>
</style>

We will start with creating the menu that will be displayed on medium and large screen sizes. To do that we will use the <v-toolbar> component. Here is the code you will put in for the navigation:

我们将从创建将在中型和大型屏幕上显示的菜单开始。为此，我们将使用<v-toolbar>组件。这是您将用于导航的代码：

<template>
        <v-toolbar app color="brown darken-4" dark>
            <v-toolbar-side-icon></v-toolbar-side-icon>
            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
            <v-btn flat>Menu</v-btn>
            <v-spacer></v-spacer>
            <v-btn flat>SIGN IN</v-btn>
            <v-btn color="brown lighten-3">JOIN</v-btn>
        </v-toolbar>
</template>

<script>
export default {
    name: 'AppNavigation'
};
</script>

<style scoped>
</style>

This code will produce this menu:

此代码将产生此菜单：

Let me explain the items that I have used in the menu. For the <v-toolbar> I have added the prop app. This prop designates the component as part of the application layout. It is used for dynamically adjusting content sizing. When the side drawer slides out then the content on the screen will adjust accordingly.

让我解释一下菜单中使用的项目。对于<v-toolbar>，我添加了pr op应用程序。这将组件指定为应用程序布局的一部分。它用于动态调整内容大小。当侧抽屉滑出时，屏幕上的内容将相应调整。

Next I have add a color to the navigation. Vuetify provides access to all colors in the Material Design spec. These values can be used within your style sheets, your component files and on actual components via the color class system. I have chosen a brown color for the navigation with the darken-4 variant. Here are all the colors available with Vuetify.

接下来，我向导航添加颜色。 Vuetify提供对材料设计规范中所有颜色的访问。这些值可以在样式表，组件文件中以及通过颜色类系统在实际组件中使用。我选择了Darken-4变体来进行导航。这是Vuetify提供的所有颜色。

There are a number of helper components available to use with the toolbar. One helper component is the toolbar side icon. This is the hamburger menu. I have positioned it first in the toolbar.

工具栏上有许多辅助组件可供使用。工具栏旁边的图标是一个辅助组件。这是汉堡菜单。我首先将其定位在工具栏中。

Another helper component is the toolbar title. I have added it after the toolbar side icon. I am displaying the appTitle which is defined in the data.

另一个帮助器组件是工具栏标题。我已经在工具栏旁边的图标后添加了它。我正在显示数据中定义的appTitle。

Next I have a series of buttons. Vuetify buttons use the <v-btn> component. For the first three buttons I am specifying a prop of flat. Flat buttons have no box shadow and no background. Only on hover is the container for the button shown. This allows me to create buttons that mimic a traditional menu look and feel.

接下来，我有一系列按钮。 Vuetify按钮使用<v-btn>组件。对于第一个三个按钮我指定PR op o F平坦。平面按钮没有框阴影，也没有背景。仅在悬停时显示按钮的容器。这使我可以创建模仿传统菜单外观的按钮。

For the JOIN button I am not using the flat prop. I am adding a color to the button.

对于JOIN按钮，我不使用平面Struts。我正在为按钮添加颜色。

The last thing I have done on the <v-toolbar> is to add the prop dark. This prop applies the dark theme variant to the toolbar. This inverts all the text so instead of being black they are now white.

我曾在<v型工具栏>上做的最后一件事是添加了pro p暗。该道具将深色主题变体应用于工具栏。这会反转所有文本，因此现在不是白色，而是白色。

The first implementation of the navigation provides all the features that I would like for it to have. But I would like to make some changes. First, I don’t want the hamburger menu to be shown unless I am on a small device. Likewise I don’t want any button in the menu to be shown when I am on a small device.

导航的第一个实现提供了我希望它具有的所有功能。但是我想做些改变。首先，除非我在小型设备上，否则我不希望显示汉堡菜单。同样，当我在小型设备上时，我也不希望菜单中的任何按钮显示。

Vuetify provides a display helper. The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.

Vuetify提供了显示帮助器。显示帮助器使您可以控制内容的显示。这包括根据当前视口或实际元素显示类型在条件上可见。

For the toolbar side icon I want it to only be visible on XS and SM devices. For MD and LG screens I want the toolbar side icon to not be visible. Likewise I want all the buttons to be shown on MD and LG screens and hidden on smaller screens.

对于工具栏的侧面图标，我希望它仅在XS和SM设备上可见。对于MD和LG屏幕，我希望工具栏的侧面图标不可见。同样，我希望所有按钮都显示在MD和LG屏幕上，并隐藏在较小的屏幕上。

I will add the class hidden-md-and-up on the toolbar side icon. I will add the class hidden-sm-and-down to all buttons and the spacer.

我将在工具栏旁边的图标上添加hidden-md-and-up类。我将在所有按钮和间隔hidden-sm-and-down添加“ hidden-sm-and-down ”类。

Now I am going to be a stickler here because I want to add one more layout change. When displaying the app on small devices I will only see the hamburger menu and the app title. Currently they are both on the left side of the screen. I want to change this so that the app title appears on the right side of the screen. This will provide a balance between the two items that are displayed.

现在，我将成为一个粘滞者，因为我想再添加一个布局更改。在小型设备上显示应用程序时，我只会看到汉堡菜单和应用程序标题。当前它们都在屏幕的左侧。我想更改它，以便应用程序标题显示在屏幕的右侧。这将在显示的两个项目之间保持平衡。

To do this I am going to add a new <v-spacer> between the toolbar side icon and the toolbar title. The spacer will move everything after it to the right side of the screen. But I only want this spacer to appear on small screens. So I add the class hidden-md-and-up to it.

为此，我将在工具栏侧面图标和工具栏标题之间添加一个新的<v-spacer>。垫片会将其后的所有内容移动到屏幕的右侧。但我只希望此间隔物出现在小屏幕上。因此，我向其添加了hidden-md-and-up类。

Here is the final code:

这是最终代码：

<v-toolbar app color="brown darken-4" dark>
    <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
    <v-spacer class="hidden-md-and-up"></v-spacer>
    <v-toolbar-title>{{appTitle}}</v-toolbar-title>
    <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
    <v-spacer class="hidden-sm-and-down"></v-spacer>
    <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
</v-toolbar>

If you want to see how it looks when you resize the screen, here is the first giphy I have ever created. :-)

如果想在调整屏幕大小时看到它的外观，这是我创建的第一个图形。 :-)

For small screens we will use Vuetify’s <v-navigation-drawer> component. If we add this to the template, we will immediately get an error. This is because every Vue component is expected to have just one root in the template. By having both a <v-navigation-drawer> and <v-toolbar> in our template, we have two roots. To avoid this create a <span> to wrap around both.

对于小屏幕，我们将使用Vuetify的<v-navigation-drawer>组件。如果将其添加到模板，我们将立即收到错误消息。这是因为期望每个Vue组件在模板中都只有一个根。通过在模板中同时包含<v-navigation-drawer>和<v-toolbar>，我们有两个根。为避免这种情况，请创建一个<span>来将两者环绕。

Here is the code for the navigation drawer:

这是导航抽屉的代码：

<template>
    <span>
        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>
            <v-list>
                <template v-for="(item, index) in items">
                    <v-list-tile :key="index">
                        <v-list-tile-content>
                            {{item.title}}
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar app color="brown darken-4" dark>
            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
            <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
            <v-btn color="brown lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
        </v-toolbar>
    </span>
</template>

<script>
export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'Meal Prep',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};
</script>

<style scoped>
</style>

Let me explain what I have put in for the drawer navigation. I have added the prop app. This is the same prop we added for toolbar. Next I have added a v-model that is looking for the data item called drawer. In data, drawer will be initially set to false. This means the drawer is closed. The drawer will open when it is true and close when it is false. I have added a click method on the toolbar side icon. When you click on the hamburger menu it will change the value of drawer from true to false or vice versa.

让我解释一下抽屉导航中的内容。我已经添加了道具app 。这与我们为工具栏添加的道具相同。接下来，我添加了一个v模型，用于寻找称为抽屉的数据项。在数据中，抽屉将初始设置为false 。这意味着抽屉已关闭。抽屉为true时将打开，为false时将关闭。我在工具栏侧面的图标上添加了click方法。当您单击汉堡菜单时，它将把抽屉的值从true更改为false，反之亦然。

The last item I have added is to give it a class with a color of brown lighten-2. I decided to add a color to my drawer since the default color is white.

我添加的最后一项是给它上一堂课，其颜色为brown lighten-2 。我决定为抽屉添加一种颜色，因为默认颜色是白色。

Next I am using Vuetify’s <v-list> component. In data I have created an array called items. This is an array of objects. Each object has a text key and the value is what is displayed in the menu. I am using a data item instead of hard-coding the menu items in the list because we will be using this in later series when we add authentication.

接下来，我使用Vuetify的<v-list>组件。在数据中，我创建了一个称为项的数组。这是一个对象数组。每个对象都有一个文本键，其值就是菜单中显示的值。我使用的是数据项，而不是对列表中的菜单项进行硬编码，因为在以后的系列中，我们将在添加身份验证时使用它。

In data, I have added drawer and items:

在数据中，我添加了抽屉和项目：

export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'Meal Prep',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};

When we click on the hamburger menu this is what the drawer will look like:

当我们单击汉堡菜单时，抽屉将如下所示：

Now that we have created our AppNavigation component we need to add it to our application. Open up the App.vue file. Inside that file we will need to import our AppNavigation component. Then we can place it in our application.

现在我们已经创建了AppNavigation组件，我们需要将其添加到我们的应用程序中。打开App.vue文件。在该文件中，我们将需要导入AppNavigation组件。然后我们可以将其放置在我们的应用程序中。

Here is the code you should have in your App.vue file:

这是您应该在App.vue文件中拥有的代码：

<template>
    <v-app>
        <app-navigation></app-navigation>

        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
import AppNavigation from '@/components/AppNavigation';

export default {
    name: 'App',
    components: {
        AppNavigation
    }
};
</script>

<style>
</style>

First you need to import the AppNavigation. When I import it I give it a name of AppNavigation. In the script I have added a components object that contains AppNavigation. The format of the name is important. When the component is added it will hyphenate the name. When I put the component in the html template I use the hyphenated name of <app-navigation>.

首先，您需要导入AppNavigation。导入时，我给它命名为AppNavigation。在脚本中，我添加了一个包含AppNavigation的组件对象。名称的格式很重要。添加组件后，它将使用连字符名称。当我将组件放入html模板时，我使用带连字符的名称<app-navigation>。

NOTE: if you are watching the code closely you will notice that I removed the <transition> and placed it directly on the <v-content>. Just wanted to let you know I made that change since I really didn’t want to go back and update all the pictures!

注意： 如果您正在仔细查看代码，您会注意到我删除了<transition>并将其直接放在<v-content>上。 只想让您知道我做了更改，因为我真的不想回去更新所有图片！

为我们的主页创建内容 (Creating the content for our Home Page)

We are going to add a full-screen image for our home page. Then we are going to add text over the image. Instead of putting our code directly in the Home.vue file located in the views folder, I am going to create a new Vue component. In the components folder create a new file called HomeHero.vue.

我们将为主页添加全屏图像。然后，我们将在图像上添加文本。我将创建一个新的Vue组件，而不是将我们的代码直接放在views文件夹中的Home.vue文件中。在components文件夹中，创建一个名为HomeHero.vue的新文件。

Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application’s content.The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections. The structure of your layout will be as follows, v-container » v-layout » v-flex.

Vuetify具有12点网格系统。网格是使用flex-box构建的，用于布局应用程序的内容v-container可用于居中页面，也可以使用fluid道具来扩展其整个宽度。 v-layout用于分隔部分。布局的结构如下， v容器 » v布局 » v-flex 。

We will use this grid system in the design for our HomeHero component. We are going to use <v-container fluid> for our root element in our template. We are going to add the prop fill-height to it. This prop will automatically adjust the container to have a height of 100% of the screen. The last thing I do is add class called home-hero.

我们将在设计HomeHero组件时使用此网格系统。我们将使用<v-container fluid>作为模板中的根元素。我们将为其添加prop fill-高度。该道具会自动将容器调整为屏幕高度的100％。我要做的最后一件事是添加c类alled hom e-hero。

In my styles I am going to add a background image to the container. This is the full-screen image that users will see when loading the website. I am using an image from unsplash.com.

以我的风格，我将向容器添加背景图像。这是用户在加载网站时将看到的全屏图像。我正在使用来自unsplash.com的图像。

Inside the container I will have a <v-layout>. The layout will wrap all the text displayed on top of the image. Vuetify provides typography settings that I will use to style the text. For the main text I am giving it a

在容器内，我将有一个<v-layout>。布局将包装显示在图像顶部的所有文本。 Vuetify提供了用于设置文字样式的版式设置。对于正文，我给它一个

class="display-4 font-weight-black white--text"

The display-4 will produce text that has a font size of 112sp and a font weight of light. I am going to override that font-weight by specifying a font-weight-black. I want the text to be white so I can add white--text The last thing I add is to specify the text to be centered.

display-4将产生文本，其字体大小为112sp，字体重量为light。我将通过指定font-weight-black覆盖该font-weight。我希望文本为白色，以便添加white--text 。我添加的最后一件事是指定要居中的文本。

I will use the same styling for the second row of text. The only addition is I add an alignment of mb-3. Vuetify provides 5 levels of spacing. The mb is saying apply a margin-bottom of 3. This will provide some spacing between the header and subHeader text.

我将在第二行文本中使用相同的样式。唯一的补充是我添加了mb-3的对齐方式。 Vuetify提供了5级间隔。 mb表示将底边距设置为3。这将在标题和subHeader文本之间提供一定的间隔。

The last thing I add is a button toward the bottom of the screen. I add this because sometimes people might not think to scroll down to see more content since the image is fullscreen. The image is a visual indicator to the users that there is more content below.

我最后添加的是指向屏幕底部的按钮。我添加此内容是因为有时由于全屏图像，人们可能不希望向下滚动以查看更多内容。该图像是用户的视觉指示器，表明下面有更多内容。

I am using the <v-btn> component from Vuetify. This is the same component we used in the navigation. This time I am applying the prop fab to the button. Floating buttons are round and usually contain an icon. I am going to add an icon of a down arrow. The <v-icon> component requires you to enter the name of the icon to be displayed. Here is a list of all the material icons available for you to use with Vuetify.

我正在使用Vuetify中的<v-btn>组件。这是我们在导航中使用的相同组件。这次我将pr op fab应用于按钮。浮动按钮是圆形的，通常包含一个图标。我将添加一个向下箭头图标。 <v-icon>组件要求您输入要显示的图标的名称。这是可用于 Vuetify 的所有材料图标的列表。

For the button I am going to add a class that will put a margin-top of 5 and set the color to be the same brown color that I used for the menu. For the icon I set its color to be white. I also set the icon to be large.

对于按钮，我将添加一个类，该类的页边距顶部为5，并将颜色设置为与菜单所用相同的棕色。对于图标，我将其颜色设置为白色。我还将图标设置得很大。

Here is the code for the HomeHero file:

这是HomeHero文件的代码：

<template>
    <v-container fluid fill-height class="home-hero">
        <v-layout justify-center align-center column pa-5>
            <div class="display-4 font-weight-black white--text text-xs-center">HEALTHY MEALS</div>
            <div class="display-4 font-weight-black white--text text-xs-center mb-3">FOR YOUR TABLE</div>
            <div class="display-1 font-weight-bold white--text text-xs-center">Finally be a foodie at home with fresh, chef-prepared meals delivered daily to your door.</div>
            <v-btn fab class="mt-5 brown darken-4">
            <v-icon large color="white">expand_more</v-icon>
            </v-btn>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    name: 'HomeHero'
};
</script>

<style scoped>
.home-hero {
    background: url('http://source.unsplash.com/0BhSKStVtdM');
    background-size: cover;
    width: 100%;
    height: 100%;
}
</style>

将HomeHero组件添加到应用程序 (Adding HomeHero Component to Application)

Now that we have created our component we need to add it to the application. Open up the Home.vue file in the views folder. Just like we did with AppNavigation, you will need to import the component and place it in the template. Here is what the Home.vue file should look like:

现在我们已经创建了组件，我们需要将其添加到应用程序中。打开views文件夹中的Home.vue文件。就像我们对AppNavigation所做的一样，您将需要导入组件并将其放置在模板中。这是Home.vue文件的外观：

<template>
    <span>
        <home-hero></home-hero>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';

export default {
    name: 'home',
    components: {
        HomeHero
    }
};
</script>

向主页添加更多内容 (Adding More Content to Home Page)

Right now we have a very nice looking home page. But we need to add more content to explain what our meal prep service provides to potential customers. So let’s add that now.

现在，我们有一个非常漂亮的主页。但是我们需要添加更多内容来解释我们的备餐服务为潜在客户提供了什么。现在让我们添加一下。

For the content we will create a new component called HomeDetails.vue. In the components folder create a new file called HomeDetails.vue. For the content I am going to use Lorem Ipsum for the text.

对于内容，我们将创建一个名为HomeDetails.vue的新组件。在components文件夹中，创建一个名为HomeDetails.vue的新文件。对于内容，我将使用Lorem Ipsum作为文本。

I will use the Vuetify layout scheme by creating the root element with the <v-container> component. Inside that I will use the <v-layout> component. For the layout I will add the prop of column. Since the layout is based off of Flexbox then it will align all the content vertically. Every text item will be in a <v-flex> component.

我将通过使用<v-container>组件创建根元素来使用Vuetify布局方案。在其中，我将使用<v-layout>组件。对于布局，我将添加列the pr op。由于布局基于Flexbox，因此它将垂直对齐所有内容。每个文本项都将在<v-flex>组件中。

The header will use the Vuetify typography class of display-2. I want this text to be centered. To make it center I add text-xs-center to the class. The last thing to add is my-5. This adds a margin along the y-axis which means it adds a margin-top and a margin-bottom.

标头将使用display-2的Vuetify印刷类。我希望此文本居中。为了使其居中，我将text-xs-center添加到类中。最后要添加的是my-5 。这会沿y轴增加边距，这意味着它会增加顶部边距和底部边距。

Next I am going to create another <v-flex> entry. This entry will have a headline and a subheading of text. I want to add some white space around the text so I am adding a class of mt-3. This will add a margin-top of 3 to all items of text.

接下来，我将创建另一个<v-flex>条目。该条目将具有标题和文本的副标题。我想在文本周围添加一些空格，因此要添加mt-3的ss o 。这将为所有文本项添加3的页边距。

Here is my HomeDetails.vue file:

这是我的HomeDetails.vue文件：

<template>
    <v-container>
        <v-layout column>
            <v-flex  class="display-2 text-xs-center my-5">Big Title Goes Here</v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar risus quis mauris interdum, in euismod nibh pretium. Etiam pulvinar tincidunt dapibus. Quisque sollicitudin, mauris a consequat consectetur, turpis nisl sollicitudin enim, id consectetur neque neque nec metus. Pellentesque dolor nisi, vulputate quis lobortis ac, tincidunt et quam. Mauris pulvinar blandit nisi nec mattis. Aliquam accumsan ut sem eget efficitur. Vivamus in tortor gravida eros laoreet condimentum nec vel dui. Nullam quam massa, ultrices eget tincidunt a, pulvinar ac libero.</p>
            </v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar risus quis mauris interdum, in euismod nibh pretium. Etiam pulvinar tincidunt dapibus. Quisque sollicitudin, mauris a consequat consectetur, turpis nisl sollicitudin enim, id consectetur neque neque nec metus. Pellentesque dolor nisi, vulputate quis lobortis ac, tincidunt et quam. Mauris pulvinar blandit nisi nec mattis. Aliquam accumsan ut sem eget efficitur. Vivamus in tortor gravida eros laoreet condimentum nec vel dui. Nullam quam massa, ultrices eget tincidunt a, pulvinar ac libero.</p>

                <p class="subheading mt-3">Nullam nec massa eu est fringilla lobortis. Praesent in enim in justo blandit varius. Cras placerat arcu in sapien rhoncus aliquet. Sed interdum tortor et tincidunt condimentum. Etiam consequat mi leo, in suscipit odio scelerisque molestie. Nam et purus consequat, iaculis augue vel, sagittis ligula. Vestibulum aliquet vulputate erat. Phasellus id mauris mauris. Nunc a maximus dolor. Curabitur ut vestibulum arcu. Curabitur non lacus justo. Cras varius a magna in semper. Nulla eros ante, consectetur faucibus sapien eu, rhoncus imperdiet dui. Sed viverra iaculis nunc, id pulvinar massa egestas vitae.</p>

                <p class="subheading mt-3">Aenean erat metus, imperdiet eget nisl laoreet, venenatis ultricies ante. In interdum ante vel dictum ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sit amet gravida diam. Aliquam in tempor metus. Fusce pellentesque pharetra sem, et luctus justo tempor dictum. Ut feugiat est sed tristique egestas. Nullam posuere a nunc in blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse laoreet ultrices eros, nec malesuada enim semper sit amet. Maecenas efficitur consectetur accumsan. Etiam in aliquam turpis, ut pharetra nulla. Vestibulum malesuada, nulla id elementum cursus, nibh dui rhoncus felis, suscipit mattis felis enim sed ex. Pellentesque scelerisque aliquam lorem, vel mattis nibh tincidunt ac. Suspendisse ac nibh sit amet lacus ullamcorper maximus.</p>
            </v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Nullam nec massa eu est fringilla lobortis. Praesent in enim in justo blandit varius. Cras placerat arcu in sapien rhoncus aliquet. Sed interdum tortor et tincidunt condimentum. Etiam consequat mi leo, in suscipit odio scelerisque molestie. Nam et purus consequat, iaculis augue vel, sagittis ligula. Vestibulum aliquet vulputate erat. Phasellus id mauris mauris. Nunc a maximus dolor. Curabitur ut vestibulum arcu. Curabitur non lacus justo. Cras varius a magna in semper. Nulla eros ante, consectetur faucibus sapien eu, rhoncus imperdiet dui. Sed viverra iaculis nunc, id pulvinar massa egestas vitae.</p>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    name: 'HomeDetails'
};
</script>

<style scoped>
</style>

在应用程序中添加HomeDetails (Adding HomeDetails to The Application)

We will add HomeDetails to the application just like we did for HomeHero. Open up the Home.vue file in the views folder. You will need to import HomeDetails component. Then add it to the template below HomeHero.

就像我们对HomeHero所做的一样，我们将HomeDetails添加到应用程序中。打开views文件夹中的Home.vue文件。您将需要导入HomeDetails组件。然后将其添加到HomeHero下面的模板中。

Here is what the Home.vue file looks like:

这是Home.vue文件的样子：

<template>
    <span>
        <home-hero></home-hero>
        <home-details></home-details>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';
import HomeDetails from '@/components/HomeDetails';

export default {
    name: 'home',
    components: {
        HomeHero,
        HomeDetails
    }
};
</script>

When we add this new component, it causes a problem with our layout. Now the text is centered based on the total height of the image as well as the new text content. Here is what it looks like:

当我们添加这个新组件时，它会导致我们的布局出现问题。现在，基于图像的总高度以及新的文本内容将文本居中。看起来是这样的：

We can easily correct this problem by specifying a max-height for the container that has our image. We want this container to be 100% of the height of our viewport.

通过为包含我们图像的容器指定最大高度，我们可以轻松地解决此问题。我们希望此容器为视口高度的100％。

Open up the HomeHero.vue file. On the <v-container> component add a style that sets the max-height. Here is that line:

打开HomeHero.vue文件。在<v-container>组件上，添加一种设置最大高度的样式。这是这行：

<v-container fluid fill-height class="home-hero" style="max-height: 100vh;">

Now we are back to having a fullscreen image with our text centered on the image. We can then scroll down to see the details.

现在，我们回到拥有全屏图像的地方，以文本为中心。然后，我们可以向下滚动以查看详细信息。

创建膳食计划组件 (Creating Meal Plans Component)

After the details I want to add images of the meal plans that we are offering on our meal prep website. For my meal prep website, I will be offering Keto, Paleo and Vegan meal plans. Feel free to customize your application to offer the meal plans you would like to offer to customers.

在详细信息之后，我想添加我们在膳食准备网站上提供的膳食计划的图像。在我的膳食准备网站上，我将提供Keto，Paleo和Vegan膳食计划。随意定制您的应用程序，以向您提供您想要提供的用餐计划。

Let’s create a new component. In the components folder create a new file called HomePlans.vue. We will use the Vuetify grid layout. Our root element will be a <v-container>. We will add a new prop of grid-list-lg. We will have three meal plans side-by-side. This prop puts spacing between them.

让我们创建一个新组件。在components文件夹中，创建一个名为HomePlans.vue的新文件。我们将使用Vuetify网格布局。我们的根元素将是<v-container> 。我们将添加一个新的grid-list-lg 。我们将并排制定三个用餐计划。该道具在它们之间放置间隔。

Next we have a <v-layout> for our header text announcing our Available Meal Plans. We will use a new Vuetify component called <v-card>. Our card will have an image, the name of the meal plan and some detail text. I will be using images from unsplash for each of the meal plans.

接下来，我们的标题文本有一个<v-layout>用于宣布我们的“可用膳食计划”。我们将使用一个名为<v-card>的新Vuetify组件。我们的卡上将有一张图片，用餐计划的名称和一些详细的文字。我将在每个用餐计划中使用Unsplash的图像。

Here is the code for the HomePlans.vue file:

这是HomePlans.vue文件的代码：

<template>
    <v-container grid-list-lg>
        <v-layout row>
            <v-flex xs12 class="text-xs-center display-1 font-weight-black my-5">Available Meal Plans</v-flex>
        </v-layout>
        <v-layout row wrap>
            <v-flex xs12 sm12 md4>
                <v-card>
                    <v-img src="http://source.unsplash.com/hjCA3ecCXAQ" height="500px">
                        <v-container fill-height fluid>
                            <v-layout fill-height>
                                <v-flex xs12 align-end flexbox>
                                    <span class="headline white--text">KETO</span>
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-img>

                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline mb-0">Keto</h3>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris felis, varius rutrum massa a, dignissim ornare dui. Cras eget velit eu dui tristique lobortis sit amet vel tellus.
                            </div>
                        </div>
                    </v-card-title>
                </v-card>
            </v-flex>

            <v-flex xs12 sm12 md4>
                <v-card>
                    <v-img src="http://source.unsplash.com/6S27S6pZ6o0" height="500px">
                        <v-container fill-height fluid>
                            <v-layout fill-height>
                                <v-flex xs12 align-end flexbox>
                                    <span class="headline white--text">PALEO</span>
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-img>
                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline mb-0">Paleo</h3>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris felis, varius rutrum massa a, dignissim ornare dui. Cras eget velit eu dui tristique lobortis sit amet vel tellus.
                            </div>
                        </div>
                    </v-card-title>
                </v-card>
            </v-flex>

            <v-flex xs12 sm12 md4>
                <v-card>
                    <v-img src="http://source.unsplash.com/1SPu0KT-Ejg" height="500px">
                        <v-container fill-height fluid>
                            <v-layout fill-height>
                                <v-flex xs12 align-end flexbox>
                                    <span class="headline white--text">VEGAN</span>
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-img>
                    <v-card-title primary-title>
                        <div>
                            <h3 class="headline mb-0">Vegan</h3>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris felis, varius rutrum massa a, dignissim ornare dui. Cras eget velit eu dui tristique lobortis sit amet vel tellus.
                            </div>
                        </div>
                    </v-card-title>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    name: 'HomePlans'
};
</script>

<style scoped>
</style>

将HomePlans添加到应用程序 (Adding HomePlans to the Application)

We have done this already several times before. Open up the Home.vue file in the views folder. Import the HomePlans.vue component and place it in the template below HomeDetails.

我们之前已经做过几次了。打开views文件夹中的Home.vue文件。导入HomePlans.vue组件，并将其放在HomeDetails下的模板中。

This is the code for Home.vue:

这是Home.vue的代码：

<template>
    <span>
        <home-hero></home-hero>
        <home-details></home-details>
        <home-plans></home-plans>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';
import HomeDetails from '@/components/HomeDetails';
import HomePlans from '@/components/HomePlans';

export default {
    name: 'home',
    components: {
        HomeHero,
        HomeDetails,
        HomePlans
    }
};
</script>

This is what the meal plans section looks like:

膳食计划部分如下所示：

获取代码 (Get the Code)

Even though this is a 4-part series, you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.

即使这是一个四部分的系列，您也可以在我的GitHub帐户中获得完成的代码。获取代码后，请帮助我，并给存储库加注星标 。

摘要 (Summary)

In the first part of this series, you have learned:

在本系列的第一部分中，您了解了：

how to install Vue
如何安装Vue
how to add Vuetify to an application
如何将Vuetify添加到应用程序
how to create multiple components
如何创建多个组件
how to style components using Vuetify
如何使用Vuetify设置组件样式

下一步是什么 (What’s Next)

In the next part of this series, we will cover Vue Router. Vue Router allows you to navigate between different pages in your application. For example, we show a list of menus that are available. When a user clicks on one they should be shown the details for that menu. Vue Router is what we will use to transition from the list of recipes page to the details page. See you in the next lesson.

在本系列的下一部分中，我们将介绍Vue Router。 Vue Router允许您在应用程序的不同页面之间导航。例如，我们显示了可用菜单的列表。当用户单击一个时，应该显示该菜单的详细信息。我们将使用Vue Router从食谱列表页面过渡到详细信息页面。下节课见。

If you enjoyed this article please clap for it. If you think somebody else would benefit from this article please share it with them.

如果您喜欢这篇文章，请为它鼓掌。如果您认为其他人将从本文中受益，请与他们分享。

If you have any questions or find anything wrong with the code, please leave a comment. If there are other topics you would like for me to write about, please leave a comment.

如果您有任何疑问或代码有任何问题，请发表评论。如果您希望我撰写其他主题，请发表评论。