Vue饿了么项目踩坑个人笔记

1.运行项目是提示Cannot find module ‘stylus’

vue项目中使用stylus预处理器写css语法，出现 Cannot find module ‘stylus’ 的错误，
首先确保package.json中有stylus-loader的依赖

这样还出现这个问题说明在webpack 里面用了 stylus-loader，但npm instatll 没有正确安装依赖，才会出现error： Cannot find module ‘stylus’。
解决办法：
重新npm install stylus 和 stylus-loader
在所在的项目目录中，输入：
npm install stylus --save-dev
npm install stylus-loader --save-dev
然后重新启动项目 npm run dev

2.路由设置不成功

原因：饿了么项目使用的vue-router是低于2.0版本，而我使用的是2.0+，所以设置不成功

解决办法：
安装了npm install vue-router@0.7.13兼容1.0版本，
命令
npm install vue-router
npm install vue-router@0.7.13
但是会出现新错Cannot read property ‘component’ of undefined，

原因 ：
vue2删除了vue1的内部指令，而vue－router1.x依赖vue的一个内部指令。
这上面如果是1.x版本，会读取Vue.internalDirectives.component这个属性，而实际上vue2根本没有Vue.internalDirectives，所以导致undefined。
解决方法：
npm install vue-router@next

但我没有使用这个方法，而是修改代码，使用2.0的路由规则
1.打开package.json 将"dependencies"中的 “vue-router"版本改为：”^2.2.0"
2.npm install
3.在App.vue中

4.在main.js中

3.vue中如何引入公共样式的的styl文件

在vue文件中还可以正常引用，只需要在

4.

将路径修改一下就就好了在前面添加 …/

5. vue1.0 与2.0的v-if，v-for的使用区别

1.0版本

  <ul v-if="seller.supports" class="supports">
            <li class="support-item" v-for="item in seller.supports">
              <span class="icon" :class="classMap[seller.supports[$index].type]"></span>
              <span class="text">{{seller.supports[$index].description}}</span>
            </li>
 </ul>

报错是因为我得环境是2.0,语法是正确的

2.0

<ul v-if="seller.supports" class="supports">
            <li class="support-item" v-for="item in seller.supports" :key="item.id">
              <span class="icon" :class="classMap[item.type]"></span>
              <span class="text">{{item.description}}</span>
            </li>
</ul>

比较1.0多了:key，以及取值方式的变化
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联。 ## 6 vue transition1.0与2.0的区别 1.0 版本 html： transition作为一个属性，可以取值。

<div v-show="show" class="detail" transition="fade">

css（stylus)：
注意类名的写法，1.0的写法是&.fade-transition

 .detail
      transition all 0.5s
      &.fade-transition
        opacity 1
        background rgba(7,17,27,0.8)
      &.fade-enter,&.fade-leave
        opacity 0
        background rgba(7,17,27,0)

2.0版本：
html ：
用transition标签把要实现的部分包裹起来

  <transition name="fade">
      <div v-show="show" class="detail">
  </transition>

css：

 .detail
      opacity 1
      background rgba(7,17,27,0.8) //渐变结束后的最终效果
      &.fade-enter-active, &.fade-leave-active //渐变的进入和退出都历时0.5s
        transition all 0.5s
      &.fade-enter, &.fade-leave-to //定义进入前和退出后样式，即透明无色背景。
        opacity 0
        background rgba(7,17,27,0)

过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

7 vue中的v-el与v-ref 1.0与2.0的区别

v-el
作用： 通过 v-el 我们可以获取到 DOM 对象。

v-ref
作用： 通过 v-ref 获取到整个组件（component）的对象。
1.0版本
代码
template

注意：不可使用驼峰命名

    <div class="menu-wrapper" v-el:menu-wrapper>
    <!--大小写敏感，v-el: api 接口获取dom对象  -->
      <ul>
        <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex===$index}"
            @click="selectMenu($index,$event)">
            <!--  better-scrollpc段没阻止默认事件，我们有派发一个；点击一下，出现两个事件，这是我们把事件也传过去，在函数中解决-->
          <span class="text border-1px">
            <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>

     <!-- 右侧foods-wrapper -->
    <div class="foods-wrapper" v-el:foods-wrapper>

script

  _initScroll() {
        this.meunScroll = new BScroll(this.$els.menuWrapper, {
          click: true   // better-scroll取消默认事件，我们这里在派发一个点击事件
        });

        this.foodsScroll = new BScroll(this.$els.foodsWrapper, {
          click: true,
          probeType: 3   /* better-scroll探针*/
        });

        this.foodsScroll.on('scroll', (pos) => {   /* 滚动监听*/
          this.scrollY = Math.abs(Math.round(pos.y));
        });
      },

方法：this.meunScroll = new BScroll(this.$els.menuWrapper,)通过this.$els.menuWrapper获取。注意：上面命名不是驼峰，下面获取时需要使用驼峰
在这个项目中的作用就是：通过这样的方式获取所有的不同分类数据，进而通过设置属性来显示，也是左右联动的依据

2.0版本
在Vue2.0中弃用了v-el,v-rel指令
解决方案：使用ref属性为元素或组件添加标记，然后通过 this.$refs获取ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例；

注意：
1.命名格式需要修改（驼峰命名格式）

2.获取元素的方式需要修改

8 Vue 循环中索引的获取命名方式 1.0与2.0的区别

1.0版本

• v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
• v-for 可以绑定数据到数组来渲染一个列表：

2.0版本

2.0索引不能用$index
循环 v-for="(item, index) in items"
使用 :class="{‘current’:currentIndex === index}"