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）