vue+webpack app项目(2)

step4 slot的使用

---

<slot> 就是外部调用时，标签中的内容。如果外部调用时没有提供内容的话，那么它就会使用自己默认提供的内容，非常方便。

-这个字面意思确实难以理解，用代码解释
-首先定义Bar.vue组件替代最外层的nav

Paste_Image.png

-然后在main.vue import 进来引用

-原来的nav标签就会变成这样写

Paste_Image.png

-先看现在的效果

Paste_Image.png

-一切正常，但是如果把Bar.vue中的slot注释，就没有这些导航图标了，所以我可以理解为使用了slot可以把不在Bar.vue的template中的代码引进来，不使用就直接使用Bar.vue的template模板了

Paste_Image.png

--现在可以把里面的item元素也弄成一个BarItem.vue组件
--这里要知道一个新的指令v-link和它的activeClass配合

v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。http://router.vuejs.org/zh-cn/link.html 详情看这里

= = 先上代码BarItem.vue

Paste_Image.png

-script中的props是在main.vue传进来的参数，v-link中的replcace:true 是用了router.replace()而不是router.go()也就是不能后退（首页标签页切换就不让用户有后退的功能了），activeClass是当路由激活时加上的类

--main.vue现在的代码

Paste_Image.png

--对了，记得把BarItem.vue引进来喔
--现在的效果还是像之前一样，但是已经实现组件化了

step5 菜单栏配置路由

--新建search.vue、message.vue、me.vue、home.vue,然后在router.js中做相应的配置

Paste_Image.png

--这里动态组件载入就是常说的懒加载组件

当你在使用 Webpack 或者 Browserify 时，在基于异步组件编写的 Vue 项目时，也可以较为容易的实现惰性加载组件。不再是之前所述的直接引用一个组件，现在需要像下面这样通过定义一个函数返回一个组件：

--resolve这个参数有点难理解，实际就是用异步加载，用AMD风格的写法是

require(['./MyComponent.vue'], 
     function (MyComponent) { 
    // code here runs after MyComponent.vue is asynchronously loaded
.})

--五个路由都写好就可以随意切换tab了

step6 HomeTab编写

Paste_Image.png

-想要达到这种效果
-homeTab这部分也是可以提取出组件作为各个tab的头部
-赞一下vue的错误提示，一开始死活显示不了，这错误提示还是很明显的

Paste_Image.png

--用组件记得在js components中注册
--还有这个提示，注册了变量没

Paste_Image.png

已更新github代码，不求打赏只求github小星星，跪求
https://github.com/sally2015/vue-project