Vue 探索与实践

- 日理万妓 2022-05-21 13:09 192阅读 0赞

# Vue 探索与实践 #

## 业务介绍 ##

基于目标用户的孩子画像，打通、聚合京东现有体系关联资源，建立共生关系的开放式生态平台，涵盖满足家庭陪伴孩子成长过程中的多维度需求。覆盖场景场景导购、精准推荐、专属权益等，为京东有孩家庭购物提供优质优购体验。在项目开发中我们遇到的问题主要有以下三个：

*  接口众多：近90个数据接口，数据字段不规范、不统一、难理解，接口开发经常延期且频繁变更；
 *  交互复杂：各种交互及状态，且一态多用，给用户展示的是多状态共同作用的结果，用户操作异步更新页面；
 *  快速上线：同时规划多版本，多版本并行开发。

## 技术选型 ##

技术选型要对症下药，为了统一管理接口和数据，所采用的框架要有统一的数据中心，能做到视图与逻辑的分离，用数据来驱动视图，项目可以工程化来应对快速上线，以及利于后期维护。从学习成本来说，Vue 更容易上手，更轻量，结合 Vuex 管理状态，视图逻辑和数据的耦合度低，项目结构清晰明了，Vue 的可扩展性也非常好。Vue 核心技术主要有以下几点：

*  声明式渲染：通过简洁的模板语法来声明式地将数据渲染进 DOM，DOM 状态是数据状态的一个映射。
 *  组件系统：跟大多数前端框架一样，都是把 UI 结构拆解成小的、可复用的组件树，然后像零件一样组装它们，Vue 还有比较独特的地方，那就是单文件组件，把归属于同一组件的模板、脚本、样式放在一个文件中，你不必再同时维护一个组件的多个文件，这样是不是很酷。
 *  客户端路由：结合 vue-router，Vue 就可以实现一个 SPA 应用了，主要通过 hash 值来控制路由，路由又可以传递状态参数给组件。
 *  状态管理：Vue 的基本状态触发过程是，用户行为使得 state 发生变化，state 的变化又触发视图的更新。而结合 Vuex 则可以管理全局的数据。

## 项目详解 ##

### 项目结构 ###

![项目结构][project_structure.jpg]

### 项目开发 ###

下面将分为以下几方面来阐述：开发辅助、路由、组件化、mixins、常量管理、数据中心、环境兼容、滚动行为。

#### 开发依赖 ####

项目采用 Webpack，并结合了 ESLint 和 Babel 等来进行开发和编译打包，Webpack 的基本配置不详讲，在基本配置的基础上，再分了开发环境的生产环境的配置：

开发环境中，用 `express` 和 `webpack-dev-middleware` 来搭建一个 dev server：

#### 路由 ####

一个路由子项如下：

其中，配置里的 meta 包含了该页面（视图）的配置信息：

*  title：页面的标题
 *  pv：用作记录页面的 PV
 *  profiles：用于判断是否需要有孩子才能进入这个页面
 *  visitor: 是否支持游客访问
 *  verify：如果支持游客访问，可选的额外的放行校验

> 问题：在 ios 里，单页面应用切换视图时页面标题不能更新  
> 解决：切换路由时用 iframe 加载一个空页面即可触发 title 更新，如下所示

路由中还要处理比较多的事情，在 `router.beforeEach` 中处理传进页面的参数，请求登陆状态和档案数据等基本接口，上报 PV，在 `router.afterEach` 中处理比较次要的事情。

#### 组件化 ####

接下来讲的是项目中的单文件组件。下面是一段特别编辑过的单文件组件代码：

<table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
 <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
  <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      1 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      2 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      3 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      4 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      5 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      6 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      7 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      8 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      9 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      10 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      11 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      12 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      13 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      14 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      15 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      16 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      17 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      18 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      19 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      20 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      21 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      22 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      23 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      24 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      25 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      26 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      27 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      28 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      29 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      30 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      31 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      32 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      33 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      34 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      35 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      36 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      37 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      38 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      39 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      40 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      41 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      42 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      43 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      44 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      45 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      46 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      47 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      48 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      49 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      50 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      51 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      52 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      53 
    </div></td> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">v-show</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"isShow"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">class</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"test"</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);">&lt;!-- slot 的运用 --&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">slot</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">slot</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">slot</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">name</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"slot2"</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">slot</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">v-if</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"testProp"</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">v-else</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);">&lt;!-- 对于嵌套较深的组件，可以用 function-type-prop 来代替 emit 触发链 --&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span> @<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">click</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"changeNickname &amp;&amp; changeNickname('小镇')"</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span> @<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">click</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"close"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">class</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"test_btn"</span>&gt;</span>{ {btnText}} 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">div</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">template</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">script</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">import</span> Utils 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">from</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">'@/utils'</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">export</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">default</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">props</span>: { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">testProp</span>: { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">type</span>: [ 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">Number</span>, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">String</span>], 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">required</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">true</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">changeNickname</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">Function</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      data () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">return</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">isShow</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">false</span>, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">btnText</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">''</span>, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">closeFn</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">null</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">methods</span>: { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      close () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.isShow = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">false</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.closeFn &amp;&amp; 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.closeFn() 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);">// 除了 poops 传参，函数传参也是一种方式</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      open (btnText = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">''</span>, closeFn) { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.isShow = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">true</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.btnText = btnText 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.closeFn = closeFn 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">script</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">style</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">lang</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"sass"</span>&gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      @ 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">import</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"common"</span>; 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">.test</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">background-image</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">url</span>(~@img/test/bg.png); 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">style</span>&gt;</span> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

slot 对于可复用组件来说意义重大，因为我们在实际的应用中，组件往往大同小异，看起来可以做成组件的模块总会或多或少差异的地方，通过参数来控制这些差异也是可行的，但非常不利于组件的扩展，所以这些地方就交给 slot 来应对，slot 的意思是插槽，意指我们能在父组件中需要的时候，给组件填充自定义内容。

父组件通过 props 给子组件传值，或者，父组件还可以通过子组件实例的方法来给子组件传参（如代码中的 open 方法）。

子组件可以通过 emit 触发事件来向上通信，或者，通过直接调用作为 prop 传进来的父组件方法也可以实现向上通信（如代码中的 changeNickname）。

#### mixins ####

通常来说，不建议使用全局的 mixin，但总会有特殊需要，比如在本项目中，由于埋点和其他需要，几乎每个组件都要用到几个公用的全局数据，所以放到全局的 mixin 是最好不过的了 `Vue.mixin(mixins)`。使用全局的 mixin 要注意的是，不要把逻辑放到 mixin 里，因为每个组件都会执行一遍 mixin 的内容，组件一多就非常可怕了。

#### 常量管理 ####

为了以后能更好地维护代码，需要对常量作归集管理，这里的常量主要是链接和数据的字段等。

统一的常量管理也有利于规范统一，比如数据字段，接口给到的数据可能有字段不统一，或者不表意，或者脏数据多等问题，这就需要在获取到后端数据后对其进行“修剪”，规范的统一的字段名也有利于组件化。

#### 数据中心 ####

![vuex][]

项目用了 vuex 来统一管理数据，在 view 组件中通过 vuex 提供的 mapActions 和 mapGetters 来求取数据，如下代码所示。

而在“数据中心”中，getters 从 state 中取值，调用 action 请求后端接口，主动触发 mutation，在 mutation 里进行数据的“修剪”，得到我们真正想要的数据。大致过程如下图所示：

![数据中心][data_center.gif]

#### 环境兼容 ####

项目需要兼容多环境，包括购物车相关、商详页链接、优惠券链接、搜索链接等因环境不同而不同的方法，为此得针对不同环境分别定义它们，再根据 ua 进行选择：

#### 滚动行为 ####

对于 SPA 应用来说滚动行为是个挺头疼的问题，毕竟其本质只是一个页面，又是异步渲染的，所以难以保证各个视图的滚动行为能像多页面应用一样。为此进行了以下几步的探索。

*  结合 vuex 来存储滚动

在 view 的 beforeDestory 时，主动记录该视图的滚动值，在下次 mounted 时延时滚动到该位置。

> 这个方案需要为每个需要记录滚动的视图添加 state、mutation 和 action，并在视图添加额外的代码，实际操作繁琐，且跳外部链接后再返回时所记录的值也已经被销毁。

*  使用浏览器存储

为了解决跳外部链接后返回也能定位滚动位置，使用 localStorage 来记录滚动值，而且使用了 mixin，这样有需要操纵滚动行为的视图插入这个 mixin 就可以了，不需要在视图里加额外代码。

但是问题来了，我们并不能区分当次访问是第一次打开还是刚从外链返回，就导致了第一次访问也会被定位，就想到了 cookie，让 cookie 保持 30min。显然，这不是好的解决方案，再考虑到的是 sessionStorage，在当前会话中它能一直保持数据，跳外链返回后数据也还能保持着（此前以为跳外链后 sessionStorage 的数据也会被清除），新标签打开视为新会话，互不共用数据，这几点特性正好符合我们的要求。

另外要考虑的一个问题是，页面是异步渲染的，我们并不知道它的接口什么时候都请求完了，于是除了有默认的延时滚动外，还添加了主动触发滚动的特性，让开发者考虑什么时候页面才算加载完（通常是 watch 某个或多个异步请求的状态），然后主动去调用滚动方法。

最后要指出的是，滚动行为的解决方案也并不是完美的，比如，这个方案并不适用于有模块懒加载的页面。

最终 mixin 代码如下：

<table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
 <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
  <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      1 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      2 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      3 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      4 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      5 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      6 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      7 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      8 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      9 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      10 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      11 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      12 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      13 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      14 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      15 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      16 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      17 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      18 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      19 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      20 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      21 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      22 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      23 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      24 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      25 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      26 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      27 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      28 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      29 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      30 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      31 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      32 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      33 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      34 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      35 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      36 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      37 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      38 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      39 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      40 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      41 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      42 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      43 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      44 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      45 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      46 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      47 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      48 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      49 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      50 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      51 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      52 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      53 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      54 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      55 
    </div></td> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);">/**</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      * 如需手动触发滚动： 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      * manualTriggerLivescroll: true 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      * this._livescroll() 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      */ 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">import</span> Tools 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">from</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">'@/utils/tools'</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">const</span> ss = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">window</span>.sessionStorage 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">export</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">default</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      data () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">return</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">routeName</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.$route.name, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">liveScrollFlag</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">false</span>, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">liveScrollFn</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">null</span>, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">liveScrollTimer</span>: 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">null</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">computed</span>: { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      liveScrollTop () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">return</span> ss ? 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      ss.getItem( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">`view-<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">${ <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.routeName}</span>`</span>) : 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      Tools.getCookie( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">`view-<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">${ <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.routeName}</span>`</span>) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">methods</span>: { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      _livescroll () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">if</span> ( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollFlag || ! 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollTop) { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">return</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollFlag = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">true</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(142,144,140);">// $nextTick 发挥不太稳定</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollTimer = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">window</span>.setTimeout( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(66,113,174);"><span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">()</span> =&gt;</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">document</span>.body.scrollTop = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">document</span>.documentElement.scrollTop = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollTop 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">500</span>) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      mounted () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">document</span>.body.scrollTop = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">document</span>.documentElement.scrollTop = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">0</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      ! 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.manualTriggerLivescroll &amp;&amp; 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>._livescroll() 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"></div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollFn = 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(66,113,174);"><span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">()</span> =&gt;</span> { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      ss ? 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      ss.setItem( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">`view-<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">${ <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.routeName}</span>`</span>, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.getScrollTop()) : 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      Tools.setCookie( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">`view-<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">${ <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.routeName}</span>`</span>, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.getScrollTop(), 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">0.2083</span>) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">window</span>.addEventListener( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">'touchend'</span>, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollFn, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">false</span>) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      }, 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      beforeDestroy () { 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">window</span>.removeEventListener( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">'touchend'</span>, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollFn, 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">false</span>) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollTimer &amp;&amp; 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(245,135,31);">window</span>.clearTimeout( 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(137,89,168);">this</span>.liveScrollTimer) 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      } 
    </div></td> 
  </tr> 
 </tbody> 
</table>

#### 其他 ####

以下都是些琐碎的小问题，也有在项目开发过程踩过的坑。

*  接口延迟

为了尽量减少请求到的数据为空出的情况，基于 vue 的请求方法上包了一层，对于超时的接口重新发起一次请求。

*  支持 rest spread

给 babel 加 `"plugins": ["transform-object-rest-spread"]` 以支持 rest spread 的写法，或者直接用 `babel-preset-env`，同时 eslint 的配置加上 `"parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true } }`

*  如何切换 Webpack 的 publicPath 在开发环境和生产环境的配置

一开始是手动去更改，后来根据当前环境自动去选择

*  别名在 mixin 资源路径的应用

由于页面的路径跟 includePath 的路径不一样，比如有个 `@mixin iconAddcart { background: url(../addcart.png); }`，在组件样式里 include 它时会提示找不到图片，这时如果改成带别名的路径 `~@img/addcart.png` 就能很好解决这个问题。

*  CSS Masking 的运用

可以参考 leeenx 的 [CSS3 Mask 安利报告][CSS3 Mask]，在本项目中较大范围地使用了 mask，主要的好处就是：缩减背景图的大小，自定义遮罩，适应同形状多背景色的情况。

> 需要注意的是，如果还要用 drop-shadow 的话，就得在外面再套一层来加 drop-shadow。

出处：凹凸实验室（[https://aotu.io/notes/2017/07/17/The-Exploration-and-Practice-of-Vue/][https_aotu.io_notes_2017_07_17_The-Exploration-and-Practice-of-Vue]）

[project_structure.jpg]: https://misc.aotu.io/Manjiz/170717/project_structure.jpg
[vuex]: https://misc.aotu.io/Manjiz/170717/vuex.png
[data_center.gif]: https://misc.aotu.io/Manjiz/170717/data_center.gif
[CSS3 Mask]: https://aotu.io/notes/2016/10/19/css3-mask/
[https_aotu.io_notes_2017_07_17_The-Exploration-and-Practice-of-Vue]: https://aotu.io/notes/2017/07/17/The-Exploration-and-Practice-of-Vue/