vue系列教程之微商城项目|项目创建
1.注册新闻资讯页面
1)在views下建secondary文件夹存放所有二级页面,并新建'news.vue'新闻资讯页面
views/secondary/news.vue
2)在路由中完成页面注册
2.编写新闻资讯卡片组件
1)在components下新建secondary文件夹存放所有二级页面的组件,并新建'newCard.vue'
2)编写组件
newCard.vue
3)在news.vue页面中引入组件并注册使用,查看效果
效果图
news.vue
3)添加头部
a.引入之前编写的头部导航栏'topBar'
news.vue
b.添加左侧返回上一级图标,由于多个二级界面都需要使用,可以单独封装为一个组件新建 components/topBar/topBarBack.vue
c.在页面中引入,并查看效果
news.vue
效果图
本篇文章是该系列文章中的第八篇,讲述的是导航栏组件封装的相关操作步骤。下篇系列文章之导航栏与页面绑定正在制作之中,各位粉丝敬请期待。
实习编辑:李欣容
稿件来源:深度学习与文旅应用实验室(DLETA)
赞 (0)