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:

這是我們將為主頁創建的內容：

應用導航 (App Navigation)

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暗。 該道具將深色主題變體應用于工具欄。 這會反轉所有文本，因此現在不是白色，而是白色。

改進導航中的樣式 (Improving the Styling in the Navigation)

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. :-)

如果想在調整屏幕大小時看到它的外觀，這是我創建的第一個圖形。 :-)

為小屏幕創建導航 (Creating the Navigation for small screens)

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:

當我們單擊漢堡菜單時，抽屜將如下所示：

向應用程序添加導航 (Adding Navigation to the Application)

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"

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.

如果您有任何疑問或代碼有任何問題，請發表評論。 如果您希望我撰寫其他主題，請發表評論。

更多文章 (More Articles)

Here are other articles I have written that you might want to read!

這是我寫的其他文章，您可能想閱讀！

Three years ago I attended a coding bootcamp. Today I became a Google Developer Advocate.This is the story of my journey and how I got there

三年前，我參加了編碼訓練營。 今天，我成為了Google Developer Advocate。 這是我的旅程以及如何到達那里的故事

How to add Internationalization to a Vue Application?Hola! Bonjour. Ciao. 你好. Here is how you add internationalization to Vue.

如何將國際化添加到Vue應用程序中 ? 你好。 再見。 你好。 這是將國際化添加到Vue的方法。

How to program a calculator with jQueryPreviously, I showed you how to use CSS border-radius property to create the following calculator. Now I will show you…

如何使用jQuery對計算器進行編程 之前，我向您展示了如何使用CSS border-radius屬性創建以下計算器。 現在，我將向您展示…

Follow Me On Twitter!

在推特上關注我！

翻譯自: https://www.freecodecamp.org/news/how-to-build-a-single-page-application-using-vue-js-vuex-vuetify-and-firebase-838b40721a07/

vuex構建vue項目

總結

以上是生活随笔為你收集整理的vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。