vue-happyfri

Posted 2020-09-20 路漫漫曾

这个项目是用于练手的一个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的整体的框架：（明天再说吧）