锐客网

  1. 首页 > 睿知 > it技术 > >

vue-happyfri

IT知识happy

非淡泊无以明志，非宁静无以致远。这篇文章主要讲述vue-happyfri相关的知识，希望能为你提供帮助。
这个项目是用于练手的一个vue小项目：
vue环境的部署请参考：http://www.runoob.com/vue2/vue-install.html 
先说一个环境配置的问题：
在打开工程的时候，有几个页面中会出现红色的波浪线，意思是此处有错误。其实是因为环境配置的原因。编写代码的时候用的是ES6。但是webstrom默认是支持ES5的。所以要配置下工程。让webstrom可以识别ES6.具体的步骤是：files-> settings-> language and framesworks -> javascripts  将选项框中的javascript language version 选择为ECMAScript6 就可以了。（对应的webstrom 的版本为：10.0.0。有其他的版本的配置路径为：Preferences > Languages & Frameworks > JavaScript 参考连接：http://www.jianshu.com/p/b4390919a5b5）
实现项目的本地运行：
一般在配置完环境之后，按照项目的配置。npm run dev ，在本地浏览器中输入对应的端口号就可以访问到项目了。如果无法访问，请验证下环境配置是否成功（http://www.runoob.com/vue2/vue-install.html  ），以及npm run dev运行的原理。再进行本地访问。
项目中用到有：
虽然是比较小的一个项目，但是该用到的东西基本上都用到了，所以之前对这些接触少的童鞋来说会有点小困难。需要花点时间。
其中用到的有：vue，vuex，es6,vue-route等。由于其中的每一部分的内容都是可以重新开一篇博文来讲的，这里就不展开了，需要了解这些的同学请自行问度娘。在这里只讲解和项目有关的内容和知识点。
本文以先整体再细节的方式解析这个项目。
vue-route： （http://router.vuejs.org/zh-cn/essentials/dynamic-matching.html      vue-route参考连接）
首先要知道客户端路由有两种实现方式：基于hash 和基于html5 history api.（参考资料：http://www.cnblogs.com/SamWeb/p/6610733.html  ）
在项目的index.html （初始页面）中，我们发现有这样的一个标签 < router-view> < /router-view> 。是做什么的呢？
在vue中实现路由还是相对简单的。因为页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。在vue-router中, 定义了两个标签< router-link> 和< router-view> 来对应点击和显示部分。< router-link> 就是定义页面中点击的部分，< router-view> 定义显示部分，就是点击后，匹配的内容显示在什么地方。
动态路由：为什么需要动态路由，在实际的使用过程中，经常会遇到某种模式匹配到的所有路由，全都映射到同个组件。比如不同的用户会调用同一个组件，但是用户名会不一样。这时，使用动态路由便可以解决这个问题。
动态路由的原理：动态部分以 : 开头，比如 { path: \'/user/:id\', component: User } 中，这个动态的路由匹配后面的User 组件。ID会随着用户的不同而变化，使用的组件一直是User 。

嵌套路由：
为什么需要嵌套路由呢？因为这样会很方便。（使用vue-route能简单的配置多层嵌套的组件）
< router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 < router-view> 。
命名路由：
有时候，通过一个名称来标识一个路由显得更方便一些。所以就有了命名路由了。
一般用于多视图的时候，这样方便识别不同的视图。
happyfri的整体的框架：（明天再说吧）
【vue-happyfri】

    推荐阅读


    上一篇：一些APP对用户错误操作的处理

    下一篇：AppCan中标首都机场移动平台项目