Vue 购物商城项目实践

1. 创建项目和连接远程github
2. 划分目录：一般划分src目录。分为资源和组件（公共组件、相关组件）、网络资源、页面、路由、状态管理、公共文件。
3. CSS文件规范化：normalize.css base.css（项目用样式)。

• 获取根元素：root（伪类用于选择DOM树之外的信息，如指定状态的元素、满足一定逻辑条件的元素，伪元素是DOM没有定义的虚拟元素，以元素内容为核心，指定选择元素的内容）。
• 定义变量：--属性名：值。
• 初始化界面：margin、padding、box-sizing（设置元素的总宽度和高度的计算方式，content-box:内容的宽度、高度，border-box：内容+填充+边框）。
• font-family:为所选元素指定一个或多个字体系列名称和通用姓氏的优先级列表。
• user-select:用户是否可以选择文本。
• -webkit-tap-highlight-color:针对于webkit渲染引擎，例如chrome和safaria,是非标准的css属性，它设置在链接被点击时出现该链接上的颜色（transparent：透明的背景）。
• vw\vh,自适应布局单位，vw等于视口宽度的1%，vh等于视口（可视区域，不包括任务栏、底部工具栏）高度的1%。
• text-decoration：文本使用下划线、删除线等。

4.添加vue.config.js、editorconfig：用于添加别名和给代码排版添加样式。

• 要在URL或者DOM中使用别名，要在别名前面加上~。

5.引入之前封装好的tabbar组件、划分项目模块。

• 在App.vue中引入tabbar使用，并且添加路由router。
• router导入模块时使用箭头函数实现懒加载，只有访问某个模块时，才加载它。

6.封装顶部导航栏并使用：

• 一般文件夹名字小写、组件名字大写。
• 多个页面都需要用到顶部导航栏，所以需要封装成一个组件，并且布置多个插槽，增加复用性。
• 想要子元素flex布局，那么父元素设置display为flex，子元素配置flex的值来进行布局。
• 配置line-height可以让文本居中，而底部和顶部导航栏都是有通用高度的（49px,44px）。
• line-height生效的前提是里面必须有内容。
• 公共的样式直接在组件里面设置，但每个不同的部分另起一个类单独设置自己的样式。

7.轮播图的封装并使用：

• 首先请求数据（拿到数据之后再说怎么使用）：使用网络请求。
• 函数调用是放到函数栈里面，调用完成后，局部变量会被释放。
• 垃圾回收机制就是寻找到没有引用的对象时就会回收它。所以让一个对象的指针引用指向null,垃圾回收机制就可以回收这个对象了（除非还有其他的引入指向它）。
• 直接导入封装好的轮播图组件导入使用，插槽原理。
• 怎么适配请求过来的数据的个数呢？使用v-for产生。
• 在vue组件中使用v-for时，要显示的指定key，不然会发出警告。
• 只要代码量大了就可以封装在其他地方进行引用。
• 请求数据最好就在顶层组件请求，然后通过组件间通信进行传递数据，如果封装到子组件内，那么就会多次去请求数据，这样是不合理的。

8.推荐商品部分的封装并使用：

• 居中对齐搭配flex，flex：1、text-align：center使用。

9.本周流行组件：

• 组件的模板里面必须要有一个根，也就是加上一个div。
• src里面用路径的别名，需要在前面加上~。
• 调解头部bar的position为fixed后，它被移出文档流中，没有为其创建空间。它会被其他元素覆盖，这时候需要调解z-index让它浮现出来。
• 想要在Vue组件中操作DOM，需要在mounted中操作，因为这个时候html已经渲染完成了。（creatd()时，html还没渲染完毕）

10.tapbar实现：

• 只是文字不一样的复用组件，就可以不用插槽了，直接拿到文字数组就可以用了。
• 设置position：sticky。粘性定位，实现吸顶效果。必须设置一个top属性，表示距离top多少距离时展示吸顶效果。

11.数据请求模型：

• 当请求的数据量很大时，并且需要分类时就需要设计一个数据模型作为容器。
• created这样的原生函数中最好不要写太复杂的逻辑，最好都写在methods里面。
• 怎么通过组件间的通信去传递本地的图片而不是直接去用服务器上挂载的图片。因为此时图片可能不在static文件夹下面，不能直接访问。
• 利用对象包含数组对象来创建数据模型。

12.tapbar点击切换数据：

• 注意有时候热更新不会更新一些样式。
• 利用子组件创建点击事件，父组件接收点击事件然后处理应该显示哪些数据。

13.使用better-scroll改善滑动效果。

• npm安装组件。

• 使用原生，父组件定义高度、overflow-y:scrool,可以实现局部滚动。

• 使用better-scroll，装在一个父组件里面，并且父组件里面只能有一个标签，给父组件设置高度、应用better-sroll。

• better-sroll默认不追踪滚动位置，需要new时传入probeType（监听）参数开启，传入0、1都是不侦测，传入2（手指拖动时监听，手指拖动的惯性时不监听），3（只要滑动就监听）。

• click参数可以控制点击事件开启与否（尤其是div之类的元素）。

• 上拉到底是否开启设置pullUpload属性。上拉到底只会触发一次，除非定时调用finishPullUp(）函数清除标志。

• 为了避免多个组件对better-scroll的依赖性太高，耦合性太高，需要封装成组件。防止组件不再维护。

• ref绑定到组件时，通过this.$refs.refname拿到的是组件对象；绑定到元素中，拿到的就是元素对象。

• style里面的scoped表示作用域，只会对当前组件内的元素设置样式。

• probeType不能跟pullUpload、pullDownRefre属性兼容。

• better-scrool生效时，会首先计算可滚动的区域高度，但是有时候场景是加载图片，而加载图片是异步的，所以计算高度可能会出现误差，造成一瞬间无法滚动页面的现象。解决方案是及时调用刷新函数进行刷新。

14.backtop组件的构建和使用。监听组件事件时，需要在@click后面加上native属性。

15.如果父组件给子组件传值不加上：，会直接把字符串传递过去。父传递值给子使用props属性，子传递值父组件，使用事件触发与绑定。

16.Vue组件里面可以通过v-show来控制组件的显示与否。

17.Vue组件创建的执行上下文的this指向Vue组件对象本身，将methods、data返回的方法或者数据都解析为自己的属性，可以直接通过this访问。但是通过外部引用拿到的导出的组件对象，是没用解析的，就是以methods、data为对象，注意引用时的区别。

18.Vue里面可以直接在img元素中，绑定@load，表示图片加载完毕。

19.Vuex：可以用于连接组件之间的通信。

20.事件总线是用于管理事件的。（$bus.emit），$bus需要被定义为一个新的Vue实例，可以发射和接受事件。

21.防止对象还未初始化就使用，可以加上对象 &&来进行防止未定义就使用。

22.只要涉及到组件或者元素，就不能在created里面调用，防止还未生成就调用。

23.监听函数中的this不再指向组件本身，而是指向事件监听者bus。

24.防止抖动和节流：

• 防抖就是有个等待时间，如果超过这个等待时间才真正触发事件，否则继续下一次等待，利用闭包、settimeout实现，也就是如果这个事件频繁被触发，就会只执行最后一次的触发。注意：setTimeOut有一个特性，就算没有延迟时间，它也是会被加到事件循环的尾部按顺序执行。
• 节流：

25.事件循环机制：

26.tapcontrol的吸顶效果：

• 首先要拿到组件高度：通过$el属性拿到元素，获得元素的offsetTop属性值。
• 注意，需要等待图片加载完毕获得的高度才是准确的。
• tanslate的值可以改变fixed的值。
• z-index只对设置了position的元素起作用。relate定位可以保持原来位置不动。
• 其实是使用了组件复用法，两个组件，满足条件的时候一个隐藏，一个现实。这是一种方案。
• 多个组件时，需要注意多用refs，因为document 是从文档上往下搜索的，很可能搜索到的不是目标元素。

27.保持home页状态：

• 使用keep-live。
• 随时保存页面的position。
• acitived状态时，跳转到这个位置，即可实现保持位置的效果。
• 跳转后记得刷新一次BScroll的布局。

28.详情页准备：

• 新建组件。
• 在router里面index.js定义组件的路由地址。
• 调用push方法跳转到该组件。
• 怎么绑定跳转过来的商品的id：

1. 在router index里面给path配置一个参数，即动态path。
2. 然后在组件页面通过route.params拿到动态path的参数，进行下一步操作。

• 如果该组件中的内容比较复杂，可以抽取一个子组件。
• slot是用传送过去的替换原有定义的slot。
• 如果要给slot绑定事件，那么最好在外面加一个div，把div传送过去并且把事件绑定在div上面，slot传递时，绑定不同的class，根据层级关系，各个class负责各层的样式。
• 动态绑定class是使用{'类名'：表达式}。
• 设置了keep-alive的组件和子组件都会保持生命周期，create只会执行一次。可用exlude排除组件，不让其保持生命周期。
• 从服务器上面请求来的数据比较混乱，需要自己抽成一个类或者数组来保存，方便调用。
• v-for还可以遍历数字，从1到这个数字。
• 根据布局写html（先观察，搭好框架才好写css），根据样式写css。
• 可使用filters对数据进行处理后进行展示。
• 多行元素可用table标签显示。
• 可给整个页面设置postision：relative，z-index,并且设置一个背景颜色来遮挡一些脱离文档的元素。
• 再次复习调用bscrool,引入组件，设置引入组件的高度，定位，然后就可以使用了。
• 尽量使用reative定位，微调位置。
• 如果多次触发事件是可以累计计数的话，是可以使用一个计数器进行计数的，这样就可以实现只触发最后一次了。
• 目前三种方式触发：

1. 发出多次触发，接收多次触发，使用防抖只执行最后一次。
2. 发出第一次触发，后面不发出，接收第一次触发，执行第一次，使用boolean变量控制。
3. 发出最后一次触发，前面不发出，接受最后一次触发，执行最后一次，使用计数变量控制。

• 可使用watch来监控数据的变化，并且做出反应。
• 在table中对table使用v-for可以绘出多个table，对tr使用v-for可以绘出多行，对td使用v-for可以绘出多列。
• 工程重点：

1. 代码如何组织。
2. 业务逻辑（不要立即动手），梳理清晰。
3. 解决产生的各种bug。

• 服务器返回的时间都是时间戳形式，需要通过转换函数将其转换为时间字符串形式，需要用到正则表达式——实现字符串匹配，常用需要存储。

• 获得数据写用户评价和推荐商品。

• 将时间戳转换成Date对象：

  var newDate = new Date(时间戳); //注意：如果是时间戳是13位，那么直接输出，如果时间戳是10位，那么需要*1000输入
  

• 可用mixin混用技术，将一些组件之间复用的代码抽取出来。

• 使用了keep-alive的组件，去访问其deactivated，没有的，去访问其destroyed.

• 可以在事件总线上面取消事件的监听。

• 为了防止用户拖拉时出现卡顿，details需要触发两次scrool的refresh，一次是细节图片展示时，一次是推荐商品展示时。

• 标签属性是不区分大小写的，所以该用驼峰就用驼峰。

• 因为请求数据是异步的，所以就算在moutned函数里面，也有可能数据还没有请求完毕，所以那些由数据驱动的子组件的DOM里面的元素还没加载出来（这个渲染也需要一个古过程的），也有可能访问出错。这个问题由update解决，因为update就是监听数据驱动的组件变化，但是它是局部的，可能一些组件更新了就会触发，所以次数过于频繁，所以可使用nextTick来等全部组件渲染完毕后调用。但是要考虑一个情况，有大量图片的时候，这个时候访问的数据可能不准确，所以有大量图片时还是只能放在图片加载完毕的触发函数里面去访问这些数据。

• Vue.nextTick是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

• 函数放的位置很重要，因为这涉及到JS的事件运行机制。

• offsettop不准确的时候往往是图片加载造成的。

• 查询条件时可用if语句规定范围。

• 使用mixin时，可以在生命周期函数里面添加函数，后面会合并，但是methods里面只能合并整体的函数，不能合并同名函数里面的内容，只会替换。

• 有时候需要使用空间节省时间。

• 也可以使用mixin混合组件使用。

• 可以使用vuex将变量存储为全局的，所有组件共享。

• 底部工具栏封装：自己封装组件就行。

• 混合使用backtoTop。

29.购物车界面（主要通过Vuex获得数据）：

• 点击按钮进入购物车。

• 数据存入Vuex。

• 数组常用的函数：pop、push、shift、unshift、reverse、sort、find、filter、indexof等。

• 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。

• mutation唯一的目的是修改state的状态。

• mutation中的代码尽可能单一一点，不要过于复杂。复杂的代码放在action里面。

• action里面是操作context也就是上下文对象，来访问state或者commit。

• state、mutation、action应该组织一下结构。还应该把方法抽取成常量。

• vuex里面，es6对象扩展里有写到，对象里面属性或者方法是可以简写的，但是必须同名，不能写不一样的名字。

• mutation使用commit方法，action对应dispatch方法。

• vue实例初始化时，data里面的数据初始化一次，后面除非直接引用修改，不然不会改变。所以要用到计算属性进行更新。（？）

• 也可以使用vuex的getters的方法来暴露可能多次被访问的变量。

• 可以使用vuex里面的mapgetters来取得getters中定义的计算属性。可以直接取出，也可以取别名。

• 然后获得到数据之后进行一个展示和汇总。

• 列表显示：

• 选中、全选。

• 底部结算栏：

30.toast弹窗：

• 使用promise方法来封装vuex操作成功的时候，promise用于异步，而异步不只是网络请求，点击事件也是一种异步。

• 多看官方文档，自行学习。

• 使用mapActions也可以映射actions到组件的methods中。

• 封装

• 以插件形式封装toast组件，使用vue.use方法来使用它。

•  普通方式封装。

31.其他细节问题：

• fastclick:解决移动端点击事件300ms的延迟。

• 减小移动端300ms延迟。

• 直接npm安装、import引用、attach使用。

• 补丁就是自己写一个脚本取支持该某个应用（ployfiil）。

• 图片懒加载：图片需要显示时再加载图片。

• 使用vue-lazyload组件。

• 安装、导入、Vue.use、将src改为v-lazy

• 可以在Vue.use里面配置一些选项，例如未加载成功时展示的背景图。

• 可用require来请求图片。Node.js require函数是将模块导入到当前文件的主要方式。

• px2vw插件来让页面适配不同大小的设备。

• 一般设计稿原型是iphone6（750*1334），是高清屏，原始尺寸是375*667。

•  在postcss.config.js文件中配置 一些设置。

32.项目部署问题：

• window上面的部署问题。

• 服务器就是一台没有显示器的主机。

• 主机->操作系统(windows/linux)->tomcat/nginx软件。

• 远程部署:一般是各种云服务器，然后搭载系统，一般搭载linux系统，然后使用相关软件进行远程安装网络服务器，进行网站部署。部署到远程之后其他设备便可以访问。

33.响应式原理相关内容：

• 发布订阅者模式

34.Vue实例生命周期补充：

• 生命周期函数、钩子函数

• 创建期间：beforecreate、created、beforemount、mouted

• 运行期间：beforeupdate、updated

• 销毁期间：befordestory、destoryed