vue-happyfri

Posted 路漫漫曾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数