gwen语音课

If you love building apps in Vue.js but struggle to know where to start with UI design, look no further than Vuetify. It's a UI library containing handcrafted material components which give apps a beautiful finish and professional feel.

如果您喜欢在Vue.js中构建应用程序，但又想知道从UI设计入手的地方，那么Vuetify就是您的最佳选择。 它是一个UI库，其中包含手工制作的材质组件，这些组件可为应用程序提供精美的外观和专业的感觉。

为什么要学习Vuetify？ (Why learn Vuetify?)

Vuetify is the most popular component library for Vue.js, enabling you to create great-looking, accessible apps even if UI design isn't your area.

Vuetify是Vue.js最受欢迎的组件库，即使您不是UI设计领域的支持者，也可以通过它创建美观，可访问的应用程序。

While the library has over 80 elements ready to use straight out the box, it also allows you to create custom elements, giving your apps a clean yet bespoke feel.

虽然该库有80多个元素可以直接使用，但它还允许您创建自定义元素，从而为您的应用程序提供纯净却定制的感觉。

This article takes you through Scrimba's free two-hour Vuetify course by Gwen Faraday. The course teaches you all the core skills needed to get started with Vuetify, including:

本文将引导您完成Gwen Faraday提供的Scrimba的免费两小时Vuetify课程 。 该课程教您入门Vuetify所需的所有核心技能，包括：

• Typography版式
• Spacing间距
• Buttons纽扣
• Navigation导航
• Grid格
• Card卡

In the first half, Gwen introduces all the Vuetify elements needed to build a great app. As with all Scrimba courses, you can pause the scrims and explore the code.

在上半年，Gwen介绍了构建出色应用所需的所有Vuetify元素。 与所有Scrimba课程一样，您可以暂停Scrims并浏览代码。

The second half lets you get your hands dirty by building a webshop. This puts your new skills to good use and lets you apply your newfound knowledge.

下半部分让您通过建立网上商店来弄脏自己的手。 这可以充分利用您的新技能，并让您应用新发现的知识。

By the end, you'll be fully versed in building professionally-styled apps with Vuetify.

到最后，您将完全熟悉使用Vuetify构建专业样式的应用程序。

讲师简介 (Intro to the Instructor)

Gwen Faraday is a software engineer, author, speaker, and & content creator who also runs a Youtube channel, the Faraday Academy, where she teaches a wide range of subjects including Vue.js and Vuetify. This makes her the perfect teacher to take you through this learning journey and bring your Vuetify skills to the next level.

Gwen Faraday是一位软件工程师，作家，演讲者和内容创建者，她还经营Youtube频道Faraday Academy ，她在该频道教授Vue.js和Vuetify之类的广泛主题。 这使她成为完美的老师，可以带您完成学习过程，并将您的Vuetify技能提高到一个新的水平。

先决条件 (Prerequisites)

To learn the most from this tutorial, you'll need a decent understanding of HTML, CSS, Javascript and Vue.js. If you're not there yet, check out Scrimba's great free courses to get you up to speed:

要从本教程中学习最多，您需要对HTML，CSS，Javascript和Vue.js有一定的了解。 如果您还没有到那里，请查看Scrimba很棒的免费课程，以帮助您快速入门：

• HTML and CSS

  HTML和CSS

• Javascript

  Java脚本

• Vue.js

  Vue.js

If you’re ready to hit the ground running with Vuetify, let’s get into it!

如果您准备开始使用Vuetify运行，那就开始吧！

Vuetify简介 (Intro to Vuetify)

In the first cast, Gwen introduces us to Vuetify and shares the two Github repositories where she has stored all the code, basic-components and vuetify-responsive. This allows us to download the code and try it out for ourselves.

在第一个演员表中 ，Gwen向我们介绍了Vuetify，并共享了两个Github存储库，她在其中存储了所有代码， 基本组件和vuetify-response 。 这使我们可以下载代码并亲自尝试。

什么是材料设计？ (What is Material Design?)

Next up, we learn about Material Design, a standard developed by Google for implementing accessible, user-friendly interfaces.

接下来 ，我们了解Material Design，这是Google为实现可访问的，用户友好的界面而开发的标准。

The Material Standard provides a set of rules for the most common elements found on web pages including buttons, text, navigation and more advanced features such as movement and elevation.

材料标准为网页上最常见的元素提供了一套规则，包括按钮，文本，导航和更高级的功能(例如移动和抬高)。

Vuetify takes the hard work out of implementing this standard by providing a bunch of ready-made compliant UI elements which we can add to our Vue.js application straight out the box.

Vuetify通过提供一堆现成的兼容UI元素消除了实施此标准的艰苦工作，我们可以直接将它们添加到Vue.js应用程序中。

首先看一下Vuetify代码 (First Look at Vuetify Code)

In the next cast, Gwen gives us our first look at Vuetify code by instantiating a Vue application, adding a Vuetify property and creating a new Vuetify object:

在下一个转换中 ，Gwen通过实例化Vue应用程序，添加Vuetify属性并创建一个新的Vuetify对象，使我们对Vuetify代码进行了首次了解：

new Vue({el: "#app",vuetify: new Vuetify({}),data: {message: "Using Single File Components",},
});

Next, Gwen shows us the <v-app> element, which is the root component of all Vuetify elements (Vuetify components must fall within <v-app>):

接下来，Gwen向我们展示了<v-app>元素，它是所有Vuetify元素的根组件(Vuetify组件必须位于<v-app> )：

<v-app><v-content><playground></playground></v-content>
</v-app>

版式 (Typography)

Click the image to access the course.

单击图像访问课程。

In the next scrim, we see some of the options Vuetify offers to handle typography, including headings, titles, subtitles and body text. We also see how to change text color and background color.

在下一幅scrim中 ，我们看到Vuetify提供的一些处理字体的选项，包括标题，标题，字幕和正文。 我们还将看到如何更改文本颜色和背景颜色。

<v-card-text><h1 class="display-4 purple yellow--text">Heading 1</h1><h2 class="display-3">Heading 2</h2><h3 class="display-2">Heading 3</h3><h4 class="title">Title</h4><h5 class="subtitle-1">Subtitle</h5><p class="body-1">Body</p>
</v-card-text>

Finally, we see how to use Vuetify classes to adjust font weight and style:

最后，我们了解如何使用Vuetify类来调整字体粗细和样式：

<h1 class="font-italic font-weight-light">Heading 1</h1>

Note: Vuetify classes override any other styles that the browser applies to HTML tags.

注意： Vuetify类会覆盖浏览器应用于HTML标记的任何其他样式。

间距 (Spacing)

Next up, we explore some of the spacing classes in Vuetify, which allow us to add margins and padding. We also see how to change spacing size.

接下来 ，我们探索Vuetify中的一些间距类，这些间距类允许我们添加边距和填充。 我们还将看到如何更改间距大小。

<h3 class="ml-5">Spacing</h3>

Best of all, Gwen also shows us how Vuetify classes can help with that holy grail of app styling - centering an element! Click through to the course to find out more.

最重要的是，Gwen还向我们展示了Vuetify类如何帮助解决应用程序样式的圣杯-以元素为中心！ 点击进入课程以了解更多信息。

纽扣 (Buttons)

Click the image to access the course.

单击图像访问课程。

In the next scrim, we look at some of the options available with Vuetify's button component, including buttons with text, icons or both.

在下一个scrim中 ，我们将介绍Vuetify的按钮组件可用的一些选项，包括带有文本，图标或两者的按钮。

<v-btn large block>Submit</v-btn>

Lastly, we look at how to build custom buttons using classes from earlier.

最后，我们看一下如何使用前面的类来构建自定义按钮。

<button v-ripple class="elevation-2 py-2 px-4">Submit
</button>

导航 (Navigation)

Click the image to access the course.

单击图像访问课程。

Next up, we look at the two main navigation options available in Vuetify,<v-app-bar> and <v-toolbar>. Both navigation elements provide automatic button and icon sizing, navigation icons and the ability to handle list dropdowns.

接下来 ，我们看一下Vuetify中可用的两个主要导航选项<v-app-bar>和<v-toolbar> 。 这两个导航元素均提供自动按钮和图标大小，导航图标以及处理列表下拉菜单的功能。

<v-toolbar color="deep-purple accent-4" dense dark><v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App Title</v-toolbar-title></v-toolbar>

Click through to see all this in action!

单击以查看所有这些操作！

格 (Grid)

Click the image to access the course.

单击图像访问课程。

In the next scrim, Gwen takes us through Vuetify's grid system, which is split into 12 columns, with five built-in media breakpoints for handling different screen sizes.

在下一个摘要中，Gwen带我们了解Vuetify的网格系统，该系统分为12列，带有五个内置媒体断点，用于处理不同的屏幕尺寸。

<v-row><v-col cols="12" sm="6"><v-cardclass="pa-2"outlinedtile>Column</v-card></v-col>
</v-row>

卡 (Card)

Click the image to access the course.

单击图像访问课程。

In this cast, Gwen explains that Vuetify uses a <v-card> component as the wrapper for any UI card. This component can take props, classes and slots and has custom events, allowing for neat, well-aligned cards in any use case.

在此演员表中 ，Gwen解释说Vuetify使用<v-card>组件作为任何UI卡的包装。 该组件可以携带道具，类和插槽，并具有自定义事件，从而在任何用例中都可以使用整齐，对齐的卡片。

<v-card-title><v-iconlargeleft>mdi-twitter</v-icon></v-card-title><v-card-text class="headline font-weight-bold">"Vue Rocks!"</v-card-text></v-card>

Gwen also introduces us to the <v-spacer> element, which lets us easily add whitespace between elements.

Gwen还向我们介绍了<v-spacer>元素，它使我们可以轻松地在元素之间添加空格。

Finally, we check out the Playground.vue file - a space for us to explore the features of Vuetify Gwen has shown us so far. Head over to the course to try it out for yourself and see what Vuetify can do.

最后，我们签出Playground.vue文件-到目前为止，我们已经在这里探索了Vuetify Gwen的功能。 前往课程亲自尝试，看看Vuetify可以做什么。

店铺导航 (Store Navigation)

Click the image to access the course.

单击图像访问课程。

Next, it's time to start building our store application. Gwen starts us off by adding a navigation bar including responsiveness and a drawer menu. We also run through some options for styling, including icons and a dense menu.

接下来 ，是时候开始构建我们的商店应用程序了。 Gwen通过添加包含响应性和抽屉菜单的导航栏来开始我们的工作。 我们还将介绍一些样式选项，包括图标和密集菜单。

主页 (Home Page)

Next up, it's time to add a home page. Gwen adds the header and a footer and then sets us the challenge of coding the mid-section using the mock-ups provided. Head over to the screencast to test out your new Vuetify skills and compare your work to Gwen's solution.

接下来 ，是时候添加主页了。 Gwen添加了页眉和页脚，然后向我们提出了使用提供的模型对中间部分进行编码的挑战。 转到截屏 ，测试您的新Vuetify技能，并将您的工作与Gwen的解决方案进行比较。

To finish off, Gwen shows us the <v-snackbar> element, which can be used to notify a user when a product has been added to the cart.

最后，Gwen向我们展示了<v-snackbar>元素，该元素可用于在将产品添加到购物车时通知用户。

<v-snackbarv-model="$store.state.snackbar.show":multi-line="true":right="true":top="true":timeout="6000":color="$store.state.snackbar.variant"
>{{ $store.state.snackbar.message }}<v-btndarktext@click="$store.commit('updateSnackbar', { show: false })">Close</v-btn>
</v-snackbar>

店铺页面 (Store Page)

Click the image to access the course.

单击图像访问课程。

In the next Scrim we build out our store page using Vuetify grid elements. First up, we add product cards by reusing the cards we built for our home page. Next, Gwen challenges us to build out a sidebar with the <v-sheet> and <v-expansion-panels> elements.

在下一个Scrim中，我们使用Vuetify网格元素构建商店页面。 首先，我们通过重复使用为主页构建的产品卡来添加产品卡。 接下来，Gwen挑战我们使用<v-sheet>和<v-expansion-panels>元素构建侧边栏。

Head over to the cast to give the challenge a try.

前往演员阵容 ，尝试挑战。

购物车页面 (Cart Page)

Click the image to access the course.

单击图像访问课程。

Next up, we add a cart page to our app. Once again, Gwen sets us the challenge of coding out the page as per her mock-ups, which is great practice for real-world coding and flexes the muscle memory needed to become a Vuetify wizard.

接下来 ，我们将购物车页面添加到我们的应用程序。 Gwen再一次给我们带来了根据她的模型对页面进行编码的挑战，这是在现实世界中进行编码的好习惯，并且可以使成为Vuetify向导所需的肌肉记忆力得到增强。

Click through to give the challenge your best shot before comparing your work with Gwen's final code. Don't forget, you can always look back at the previous scrims or check out the Vuetify docs if you're having trouble.

在将您的工作与Gwen的最终代码进行比较之前，请单击以提供最佳挑战。 别忘了，如果遇到问题，您可以随时回顾以前的稀松布，或查看Vuetify文档。

结帐画面 (Checkout Screen)

In the final code scrim, we build a simple checkout flow using the <v-stepper> element.

在最终的代码稀松显示中，我们使用<v-stepper>元素构建一个简单的结帐流程。

<v-stepper-header><v-stepper-stepstep="1":complete="step > 1"/><v-divider /><v-stepper-stepstep="2":complete="step > 2"/><v-divider /><v-stepper-stepstep="3"/></v-stepper-header>

To finish the course, Gwen points out that there are a few features in the mockups which we haven't covered and encourages us to have a go at coding them ourselves using Scrimba's interactive interface.

为了完成本课程，Gwen指出，我们尚未涵盖模型中的一些功能，并鼓励我们使用Scrimba的交互式界面自行编写代码。

结论 (Conclusion)

A huge well done for completing the course! I hope you've found it useful and now have the confidence to build stunning apps using Vuetify. Why not continue your learning journey by checking out the huge range of other topics available over at Scrimba?

完成课程的过程做得很好！ 希望您发现它有用，并且现在有信心使用Vuetify构建出色的应用程序。 为什么不通过查看Scrimba上提供的其他广泛主题来继续学习之旅呢？

Wherever you go next, happy coding :)

无论您下一步去哪里，都可以享受快乐的编码:)

翻译自: https://www.freecodecamp.org/news/want-to-learn-vuetify-heres-our-free-15-part-course-by-gwen-faraday/

gwen语音课