在 Nuxt 应用里新建一个登录用的页面，放在 pages 里面，文件的名字是 login.vue，这样访问这个页面的地址就是 login。

一组 template，设置一下组件的模板，先用一组 form 标签，在它上面绑定 submit 事件，用一下 prevent，防止提交事件的默认行为，不然提交表单的时候会刷新页面。

在它里面包装的主要的东西就是一个登录表单。一组 div，里面添加一个 input 元素，类型是 text，把它的 autocomplete 设置成 usename，再把 placeholder 设置成名字。

复制一份这个字段，把 input 类型设置成 password，autocomplete 是 current-password，placeholder 是密码。

然后再添加一个登录按钮，一组 div，里面用一组 button 元素，上面加上一个类，名字是 primary，在我们的应用里，使用这个类可以给这个按钮添加额外的样式。按钮文字是 登录。

default.vue

打开默认的布局，default.vue，在这个 header 里面，跟 nav 同一级别，添加一组 div，里面再添加一组 div，它里面用一下 NuxtLink，链接的地址是 /login，链接的东西是一个 img 图像元素，在项目的 public 目录里面，有一个 icons 目录，它里面有几个小图标。你可以在这个项目的代码仓库里找到这些小图标。

设置一下图像的地址，/icons/account.svg 。再设置一下它的 alt 属性的值。

测试

在浏览器测试一下，点击页头这里的帐户小图标，现在可以打开登录页面。

login.vue

回到 login 组件，在组件里添加一组 script ，上面加上 setup，然后先设置一下页面标题，用一下 useHead，提供一个对象，设置一下 title 属性的值，设置成登录。

下面准备一个表示用户名的数据，名字是 name，用一下 ref，提供一个空白字符。下面再准备一个表示用户密码的数据，名字是 password，用一下 ref ，默认值是空白字符。

然后再准备一个登录用的方法，声明一个 login ，它是一个箭头函数，函数里面，用 console.log，在控制台上输出 name，然后加上 name.value 的值，下面再输出 password，后面加上 password.value 的值。

在组件的模板里，在这个 name 元素上，用一下 v-model 指令，把组件里的 name 这个数据交给它。再找到 password 元素，添加一个 v-model 指令，把 password 这个数据交给它。

下面绑定一下登录按钮的 click 事件，用 login 这个方法来处理这个事件。

测试

再回到浏览器测试一下，在名字这个文本框里输入点内容，然后在这个密码文本框里也输入点内容。点击登录，会执行组件里的 login 方法，在控制台上会输出当前名字还有密码字段里的值。