vue+node全栈手机商城[8]-vant新建注册页面

上一节我们已经实现了注册页面的跳转，所以本节我们将使用vant的框架来完成注册页面。让它具备基本的页面交互功能。为下一步的登录和注册做好准备。这是vant的官方网站。在左侧的导航中，向下滚动到NavBar导航栏。【使用指南】在main.js中添加如下代码import{NavBar}from'vant';Vue.use(NavBar);然后根据我们的需要，在register.vue文件中的模板中添加如下代码，在register.vue文件中的脚本中，添加如下代码，data(){return{msg:'注册页面',username:'',password:'',password2:'',userErr:'用户名不能为空',passErr:'密码不能为空'}},methods:{//返回上一步goBackFn(){this.$router.go(-1);}}现在您应该可以看到一个导航栏，当您单击返回时，您可以返回到上一页。接下来，我们使用【字段输入框】来实现用户输入的部分，点击：字段输入框，查看文档的使用指南，在main.js中添加如下代码，import{Field}from'vant';Vue.use(字段);我们使用自定义类型的Field，在register.vue文件中的模板区域添加如下代码，在脚本区添加如下代码，data(){return{msg:'registerPage',username:'',password:'',password2:'',userErr:'用户名不能为空',passErr:'密码不能为空'}}这时候我们的register.vue注册页面，虽然还没有对应的js方法还没有添加，但是就页面而言，已经初步完成了。更多教程内容更快观看，请扫描下方二维码关注微信公众号：web前端课堂，谢谢。还有前端学习群，让你分组学习，进步更快。