Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件

前面几篇文章,我们设置好了基本布局,接下来,要设置“首页”的头部信息,

一. 创建各个文件

“首页”的内容区域,“分类”的头部信息,“分类”的内容区域,“购物车”的头部信息,“我的”头部信息,“我的”内容区域。

具体的,在**src/views/**文件夹中创建4个文件夹home,kind,cart,user,里面各自创建一个index.vue文件,
Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第1张图片

1. src/home/index.vue文件

Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第2张图片

2. src/kind/index.vue文件

Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第3张图片

3. src/cart/index.vue文件

Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第4张图片

4. src/user/index.vue文件

Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第5张图片
同时,把App.vue中的div.container部分去掉

二. 抽离底部组件

src/components文件夹下创建一个Footer.vue组件,把App.vue中的template中的footer部分粘贴到Footer.vue组件中,
Vue微型项目(四)—— 设置各个页面组件以及抽离底部组件_第6张图片
现在,只是把各个页面和底部组件抽离了出去,但是App.vue文件中没有加入路由,所以浏览器中没有任何效果了。


接下来,我们加入路由->

你可能感兴趣的:(JS技术,node.js,vue)