# 靜態頁面 [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，支持所有瀏覽器內置的方法。 最后刷新頁面，就可以看到我們所編寫的內容已經呈現出來。