# 静态页面 [TOC] > 本节将介绍 Vue 和 Vuetify 的基本使用。 启用 Vue 程序之后，会发现已经有预置页面，包含一个粉色的导航栏，在本节中，我们只需要创建一个基本的登录表单即可。 ## Vue 组件加载 看到文件中的 `<v-main>` 组件： src\App.vue ```html title="src\App.vue" <v-main> <HelloWorld /> </v-main> <script> import HelloWorld from "./components/HelloWorld"; export default { name: "App", components: { HelloWorld }, ``` 看到以上节选代码，可以看到 `<script>` 标签中引入了一个 `HelloWorld` 组件，并且在下面的 `components:` 这个方法中进行加载。 所以我们可以基本了解到 Vue 加载组件的方式，先通过 `import` 引入，然后进行加载，即可通过 `<HelloWorld />` 进行使用。 并且我们会发现 `HelloWorld` 名字是自定义命名的，所以我们也可以将它修改成其他的名字（只要你喜欢即可）。 ## 创建登录表单 现在我们将 `HelloWorld` 组件所涉及的所有代码移除掉： ```html title="src\App.vue" <v-main> </v-main> <script> export default { name: "App", components: { }, ``` 重新进行表单的编写，由于我们使用了 Vuetify 组件库，所以我们直接使用组件库的 [文本框组件](https://vuetifyjs.com/zh-Hans/components/text-fields/) 即可： ```html title="src\App.vue" <v-main> <v-container> <h1>登录表单</h1> <v-text-field label="邮件地址" type="email"></v-text-field> <v-text-field label="密码" type="password"></v-text-field> <v-btn rounded> 登录 </v-btn> </v-container> </v-main> ``` 可以看到，我们引入了一个 `<v-container>` 组件，该组件可以让我们的整个布局宽度随着屏幕尺寸的大小而改变，屏幕尺寸过大时则会固定一个最大宽度，你可以拖动你的浏览器试一试。 那么 `<v-text-field>` 组件则就是我们所使用的文本框组件，其中 `label` 和 `type` 都是浏览器原生 API，支持所有浏览器内置的方法。 最后刷新页面，就可以看到我们所编写的内容已经呈现出来。