更简单的VueJS编程 - 使用VueJS代码库 VuetifyJS

12002

1. 本课介绍

在本课里，你将学会使用别人编写好的代码库放到自己的程序里面，这不仅减少自己编写代码的工作量，并且代码质量更好。

VuetifyJS是VueJS的代码库，这课将教授你如何利用这个第三方库进行编程。通过阅读Vuetify文档，动手安装Vuetify，并且尝试几个常用的组件的用法，你将体验使用VuetifyJS编写页面更加简单，而且网页美观。

2. VuetifyJS的基本概念

编程中，常常会用到第三方库。这些库由由开发者提供，包含的可重复使用的代码和功能模块，处理常见任务，如用户界面设计、日期和时间，用户信息验证等功能。借助第三方库，开发者可以节省时间和精力，避免重复工作。

VuetifyJS是建立在VueJS之上的第三方UI库，专注于解决用户界面设计问题。UI是用户界面（User Interface）的意思。它提供数百个精心设计组件，易于学习和上手，因此成为备受欢迎的UI代码库。

VuetifyJS将各种UI用法封装成了组件，例如按钮、表格、对话框等，每个组件都包含了模板和脚本代码，使其非常方便地放入到你编写的代码中。这种方式可以使你快速的开发出美观而且功能丰富的用户页面。

3. 如何高效阅读Vuetify文档

阅读第三方代码库的文档，首先找到如何把它快速的安装好的方法、然后用起来，看看它长啥样。

动手安装Vuetify

点开Vuetify官方文档地址，点击“快速入门”。进入了下面的页面：

往下滑动，找到“CDN的用法”，把代码复制到Vscode里面运行，保存为vuetify.html文件，

这段代码下面的红框的部分意思是引入VueJS和Vuetify的代码库，上面的红框表示并且还需要的其它的第三方库，如字体、图标库等，可见使用第三方库是很常用的编程方法。

用浏览器打开，看到下面的页面，说明运行正常。

这样就运行了一个最基础的Vuetify页面，在这个最基础的页面上，可以尝试很多VuetifyUI的组件，下面会教你如何操作。

阅读VuetifyJS的文档

浏览左边栏，了解整体的功能，重点看"UI组件”，点开看一下有哪些组件分类，分类里面里面包含哪些具体的组件，每个组件的长相都显示出来，非常方便。例如想找做表格的组件，按照下图的方法找到表格这一类下面的UI组件：

逐个点开看看，上下滑动，寻找自己想做的表格的样子，每种样子的表格都有一套UI组件的代码。

4. 读文档，练习使用常用组件

阅读这个文档的目的就是学会使用这些UI组件来编程。下面以组件v-radio 为例，说明如何使用VuetifyJS提供的组件编写代码。

• 打开UI组件 找到下图的位置：

• 点击图右上角<>图标。

• 看到菜单栏有TEMPLATE和SCRIPT, 这是组件的模板和脚本，组件模版部分的代码放到文件模板的位置，组件脚本部分的代码放到文件脚本的位置。
  • 复制<template></template>包住的模板部分内容，使用它替换掉上面vuetify.html 中的Hello World。

 <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <template>
            <v-container class="px-0"fluid> 
              <v-radio-group v-model="radioGroup">
                <v-radio v-for="n in 3" :key="n" :label="`Radio ${n}`":value="n" ></v-radio>
              </v-radio-group>
            </v-container>
          </template>
        </v-container>
      </v-main>
    </v-app>
  </div>

• 再点击菜单中SCRIPT。

• 图中<script></script>包住的内容是组件的脚本部分，注意只复制红框部分就是export default{}包住的部分，把它放到vuetify.html的Vue实例里面vuetify: new Vuetify(),这行代码的下面，保存文件。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
      return {
        radioGroup: 1,
      }
    },
  })
</script>

• 用浏览器打开这个文件，观察到页面发生了变化，出现了三个rdiao按钮。

再用同样的方法练习其它常用组件：
v-card
v-dialog
v-form
v-select
v-btn

把这些组件尝试一遍后，你可能已经发现使用 VuetifyJS 组件编写代码非常方便。只需简单的复制粘贴，你的页面外观就会变得美观。这种方式不仅避免了编写复杂的代码，还能快速创建高质量的网页。这正是利用第三方代码库的优势所在：简化了编写代码的工作，提高了代码质量，同时让你能够快速构建出令人满意的网页。

5. 项目：做一个数据表格

表格在网页中应用广泛，02课里阅读菜鸟教程HTML表格时候，看到用HTML标签写出来的表格长相简单、粗糙。但是如果用Vuetify表格组件编写代码，做出来的数据表格就像文档里面的那样美观。

按照上面练习组件的方法，任意选一个表格的长相，尝试写一个数据表格HTML文件，把这个样子的表格做出来。