在我们这个 vue 应用里添加一个用户登录组件，放在 src/user/components 目录的下面，文件的名字可以是 user-login.vue。

在组件里添加一组 template，设置一下组件的模板，一组 div，先随便添加一行文字。 然后打开 app 组件，可以在这个组件里用一下刚才创建的 UserLogin 组件，先在组件里导入 UserLogin，位置是 @/user/components/user-login.vue

然后在组件的脚本里面，添加一个 components 属性，把导入的 UserLogin 放进来。这样就可以在这个组件的模板里使用 UserLogin 了。 找到组件的模板，找个地方可以添加一个 UserLogin 。

在浏览器上观察一下，界面上会显示 UserLogin 这个组件里的内容。 回来继续编辑一下这个组件，这里可以先添加一个 text 类型的 input， 设置一下 placeholder 属性的值，比如用户名。 再用 v-model 绑定一个数据，名字是 name 。

复制一份，修改一下，绑定的数据是 password，占位符文字是 密码，再改一下这个元素的类型，把 text 换成 password 。

下面再添加一个按钮，一组 button，按钮文字是 登录，在这个按钮元素上面绑定一个 click 事件，点击这个按钮的时候执行一下组件里的 login 这个方法，等会儿再去定义这个方法。

在组件里面再添加一组 script ，里面默认导出一个对象，先添加一个 data 方法，这个方法返回的东西是组件里的数据，里面需要 name ，默认让它等于一个空白的字符，再添加一个 password，也让它等于一个空白的字符。

然后再添加一个 methods，里面可以添加一些组件需要的方法，用 async 标记一个方法，名字叫 login，这个方法可以处理用户登录。

暂时我们先在控制台上输出这个组件里的 name 还有 password 数据的值。

回到浏览器，现在界面上会显示一个用户名，密码，还有一个 登录按钮。这个密码字段的样式可以再改一下，打开 app/styles 下面的 app 样式表，这里可以再添加一个样式选择器， input type=password。

再回到浏览器，打开控制台，然后在 用户名 这里输入要登录的用户的名字，在密码这里输入用户的密码。然后点击 登录。会执行 UserLogin 组件里的 login 这个方法。

在控制台上会输出用户在用户名还有密码字符里填写的内容。