对vue饿了么项目重构以后的一些理解

vue饿了么重构的整理与思考
复制代码

这是我第一次写文章,主要是培养本身独立思考的能力,顺便留下技术的沉淀,看过不少文章都是写博客以后就一直会有动力,也但愿本身不断学习,不断的写下去.

从去年开始就关注vue本身也作过一个项目,但只是那种照抄搬得写了,对于不少东西不是很理解,今年来杭州找工做,经历了一番波折,因而决定从新拾起vue,也是本着试试看的态度在慕课网上买了vue仿饿了么,可是发现买了以后学到好多东西,首先对于项目总体架构有了理解,(之前是jq作项目主要是操做DOM,可是vue是数据驱动视图,一切视图的改变主要是数据的改变,只要这点转变过来了就能够了),记得之前大佬告诉过我说,会多少并不重要,重要的是对于项目的总体架构,之前不是很理解,这个项目以后开始发现项目已经慢慢开始可以架构起来了,vue主要思想必定要理解 数据驱动视图

首先附上项目地址:my-sell

对于mvvm的实现原理 经过Directives指令作一层封装而后去改变(视图)DOM上,而视图的改变,这里我理解的是触发事件以后,vue.js监听，再反映到数据上
复制代码

jq的实现原理 传统的jq只是改变DOM,当交互比较复杂的时候很是麻烦,并且频繁的操做DOM也是性能优化的障碍
复制代码

思想转变过来以后就开始架构项目

这是目录结构,如图所示

build config是项目的webpack相关配置,这个有篇文章写得特别好 一字一句的搞懂vue-cli之vue webpack template配置

1.首先是对于页面骨架的开发,就是我刚才说的,要先能架构起项目,以后再给里面填充具体的细节,这里咱们采用vue-cli搭建,以后就是页面路由的实现,在头部和不一样的路由开始填充一些东西,达到路由能够切换,整个项目骨架清晰,下来就是往骨架里面填充东西的事情
复制代码

剩下的事情就是整个项目的各个组件的开发

1 ● 字体图标的制做 实际项目开发时当将svg转化为iconfont制做工具IconMoon

2 ● 对于模块化的理解 模块化就是将屡次复用的代码提取出来,达到复用精简代码的效果,包括js模块化和css模块化,之前的理解只是js模块化,这个项目让我对css模块化有了必定的认识

3 ● vue-router路由机制 vue路由依赖：vue-router 经过组合组件来组成单页应用程序，只须要将组件映射到路由便可。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 须要注意2种模式的区别：hash模式和history模式，hash模式会在后面加一个很丑的#，能够开启history去掉。 hash模式原理：它的特色在于：hash 虽然出如今 URL 中，但不会被包括在 HTTP 请求中，对后端彻底没有影响，所以改变 hash 不会从新加载页面。hash能够理解为锚点，例如./index.html/#/foo，hash值为#/foo，这样不会跳转页面。就至关于统一页面的不一样锚点，页面间跳转与 ./index.html/#foo到./index.html/#bar相似 路由层面还会包括嵌套路由，动态路由以及重定向，至关于本身模仿浏览器请求而后服务器响应模式，其实不涉及向后端请求，仅在浏览器就能够实现页面跳转

4 ● 对状态管理vuex的理解

为何要用vuex个人理解是：
(1)多个组件(视图)共享状态:通俗来说，就是多个组件间会通讯时，致使从后端拿来的数据发生变化，当组件较多时，若是兄弟组件间的通讯都依赖父组件进行通讯，会致使组件间的耦合很是高，从而致使项目逻辑混乱，难以维护。
(2)多个组件（视图）依赖于同一状态。 来自不一样视图的行为须要变动同一状态。
(3)它仍是一个共享数据中心,多个组件(视图)依赖同一数据时,直接从vuex的action里面拿就能够了,不用重塑请求
(5)真正实现数据驱动视图,vuex state，前端data view，前端DOM actions，用户操做，引发data变化从而致使DOM变化.
一个状态管理库,会涉及到这三个部分:state view action.能够知道的是
(1)state会影响view
(2)view会影响action

vuex的特色是把数据单独隔离,造成一颗状态树,单独隔离就意味着它有本身的生态系统.输入和输出,其中action做为数据的输入,state做为数据的输出,以下图：
复制代码

必定要注意mutation和action的区别！
复制代码

mutation只变动本地的状态，也就是说，直接只去修改store中的数据。 action包含异步操做，直接调用api，经过api的数据，再提交mutation。