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)

相关推荐