vue.js 的学习之路

转自：http://www.cnblogs.com/CyLee/p/5813721.html

技术栈

# vue官网
http://vuejs.org/

# Vuex中文手册 
http://vuex.vuejs.org

#  Vue-Router 手册 
http://router.vuejs.org 

# 最全Vue资源大全
https://github.com/opendigg/awesome-github-vue

# vue-devtool 调试vue必备chrome工具
https://github.com/vuejs/vue-devtools

# vue + typescript
https://github.com/HerringtonDarkholme/vue-ts-loader

# webpack2 中文文档
http://www.css88.com/doc/webpack2/guides/code-splitting-require/

# Vuejs 实用技巧
https://zhuanlan.zhihu.com/p/25589193

# Vue.js 实用技巧（二）
https://zhuanlan.zhihu.com/p/25623356

# 饿了么基于Vue 2.0的通用组件库开发之路
https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484467&idx=1&sn=8643c5945adb151db9c6fe757cd6adfa&chksm=972366f1a054efe733e01069b2adb81d453a2c30bbc5329c77948e8160090294bf14918381a1&scene=21#wechat_redirect

  

  

Vue最好的UI库

# PC端
http://element.eleme.io/

# 移动端
https://github.com/ElemeFE/mint-ui

 

 

 

第三方插件收集：

# vue-lazyload 一个简单易用的 Vue 图片延迟加载插件
https://github.com/hilongjw/vue-lazyload?from=gold

# 表单验证插件
https://github.com/QingWei-Li/vuerify

# 前端国际化
https://github.com/kazupon/vue-i18n

# swpier强大且令人羡慕的拖拽组件
https://github.com/surmon-china/vue-awesome-swiper 

 

 

安装

注意 ：由于部分模块是需要跨域才能下载，所以这里需要使用cnpm install，cnpm是淘宝版本的npm，需要另外下载：http://www.cnblogs.com/CyLee/p/5719929.html

# 全局安装 vue-cli
$ npm install -g vue-cli

# 创建一个基于 "webpack" 模板的新项目,注意，Use ESLint to lint your code? (Y/n) n
$ vue init webpack my-project

# 安装依赖，走你
$ cd my-project

# 使用cnpm进行安装
$ cnpm install  

# 运行,并且自动进入热编译
$ npm run dev

  端口可以在config/index.js 中修改

 我们启动页看到的文件源代码是：src/App.vue

 在build/webpack.base.conf.js 中搜索 jsLint 关键词注释掉相关的代码即可关闭 jsLint 代码严格模式

 Vuejs不兼容低版本浏览器，比如IE8、360浏览器兼容模式等 

 

 

---

  

神坑与碎片化知识点记录：

 

73、vue动画的使用。

https://cn.vuejs.org/v2/guide/transitions.html

.cell-enter-active, .cell-leave-active {
  transition: all 1s;
}

/* 新成员进入时的动画 */
.cell-enter, .cell-leave-to /* .cell-leave-active below version 2.1.8 */ {
  /*opacity: 0;*/
  transform: translateY(300px);
}

/* 所有项移动时的动画钩子 */
.cell-move {
  transition: transform 1s ease;
}


        

            {{ item.title }}
        

 

 

72、史诗级的神坑：v-for循环中，我习惯这样使用index：v-for='(item, index) in items' :key='index'

当我对items数组的前面插入数据时：

this.items.unshift({title: '重大事件', time: '2018.08.08 10:00', content: '涡领商业西街食物中毒', num: '1'})

由于加入了transition-group 动画，我可以很清楚的看见插入的动画效果，却一直是push的效果。后来查看官方demo，才发现这个:key需要这样设置：

v-for='(item, index) in items' :key='item'

 

71、v-cloak 用来解决渲染之前的尴尬期

https://segmentfault.com/a/1190000008819667

 

70、vue v-model 与 组件化的表单组件如何沟通

参考mint-ui的代码：

https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue

https://github.com/ElemeFE/mint-ui/blob/master/packages/field/src/field.vue

    
    
    
    

    
        

            

                
            
            

            Picked: {{ picked }}
        
    
    

 

 

 

 

69、input 聚焦的时候键盘盖住

function getElementTop(element){
    try {
　  　　　var actualTop = element.offsetTop;
　  　　　var current = element.offsetParent;
　  　　　while (current !== null){
　  　　　　　actualTop += current.offsetTop;
　  　　　　　current = current.offsetParent;
　  　　　}
　  　　　return actualTop;
    } catch (e) {}
　  　}

setTimeout(() => {
    window.scrollTo(0, getElementTop(e.target));
}, 150)

 

 

 

 

68、注册全局指令

https://cn.vuejs.org/v2/guide/custom-directive.html

// v-auth 全局权限指令，但暂时没有想好怎么处理
Vue.directive('auth', {
  inserted: function (el, node) {
    // 从 store 中获取权限信息
    var auth = store.state.auth.authInfo
    // 遍历权限列表
    for (var i = 0; i < auth.length; i++) {
        // 如果符合条件，那么就把它删除
        if (auth[i].resContent === node.value) {
            // 删除元素
            return el.parentNode.removeChild(el)
        }
    }
  }
})

 

 

 

67、新的错误出现：Module build failed: Error: No parser and no file path given, couldn't infer a parser.

https://segmentfault.com/q/1010000015052538

运行：npm i prettier@~1.12.0

 

66、Vue自带的错误捕获机制

https://cn.vuejs.org/v2/api/#errorHandler

Vue.js 2.2.0+提供了 errorHandler, (一般在src目录的main.js文件中配置) 

Vue.config.errorHandler = function(err, vm, info) {
    console.log(err, vm, info);
};

  

 65、fetch中response.json()的问题

1、你不能连续使用两次response.json()，否则会报错

2、你不能直接在promise中打印出console.log(response.json())，打印不出的。所以你必须这样

var json = response.json()
json.then(_=>{ console.log(_) })
return json

 

 

64、webpack-dev-server 无法通过ip访问的问题

http://www.cnblogs.com/CyLee/p/8376648.html

 

63、路由的限制和next的问题。 

 if (needLoginPage.indexOf(to.fullPath.replace(/\/|\\/g, '').toLocaleLowerCase().trim()) >= 0 && !store.state.token) {
        // 史诗级神坑，这里必须先next，否则会一直返回不了，
        // 不要问我为什么,我猜测是，由于你缺少了一次next,一直卡着不给后退。所以这里无论如何也需要next一下.
        Toast('请先登录')

        // next()
        // 设置去路
        return store.dispatch('set_wantTo', to.path).then(_ => {
            // 跳转到登录页
            router.push('/login')
            // 继续渲染它？
            return next()
        })
}

 

 

 

 

62、分享一个小技巧，如果项目迁移、而node_modules迁移有问题，项目启动不了的时候，可以选择完全删除node_modules。然后重点来了

不要使用window内置的powser shell，而是使用一些高亮的shell工具如cmder。执行cnpm install试试。如果还是不行，继续重复删掉node_modules，反复执行cnpm install。记得要用cmder哦

 

61、学完局部注册和全局注册的差别后，你再看看main.js的new Vue代码，你应该懂得了

 

这是因为：你的入口main.js中，仅仅注册了一个全局组件App.vue，

 

 

并且渲染在模板上

绑定在html上的一个叫#app的元素上

 

也就是说，你的所有组件，都是在App.vue下活动的子组件。

而子组件的切换，是通过url来切换的？如何切换呢？是通过路由来监听切换的

基本上就是这样的原理

 

60、Vue warn]: Do not use built-in or reserved HTML elements as component id: button

将组件的name属性从button改为mybutton即可。

export default {
    name: 'mybutton',
    // ...
}   

 

 

59、webpack 使用别名（resolve.alias）解决scss @import相对路径导致的问题

 

58、vue 更新了vue-cli到最新版本后引发的问题： require和import、vue-loader的问题

结局：[email protected] 降级到 [email protected] 即可解决

 

57、手动挂载$mount()

如果没有挂载的话，没有关联的 DOM 元素。是获取不到$el的。

https://vuejs.org/v2/api/#vm-mount

var MyComponent = Vue.extend({
  template: '
Hello!
'
})

// create and mount to #app (will replace #app)
new MyComponent().$mount('#app')

// the above is the same as:
new MyComponent({ el: '#app' })

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

 

56、销毁组件

// get~ 销毁组件
destroyElement() {
  this.$destroy(true);
  this.$el.parentNode.removeChild(this.$el);
},

 

55、vue.extend 局部注册 的应用2

请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck})

最终还是要通过Vue.components注册才可以使用的。 

 

54、vue.extend 局部注册 的应用1

请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦

另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});

 

53、Vue的实例属性

 

52、从来没使用过 的使用方式。

一直都是工程化来开发的。现在也开始使用一下吧。

index.html

    
    
    
    


    

        
总数量： {{ total }}
        
    

 

Components/Counter.js

Vue.component('counter', {
        template: `
            

                +
                -
            
        `,
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            handleAddNum: function (){
                this.counter++;
                this.$emit('add', this.counter);
            },
            handleReduceNum: function (){
                this.counter--;
                this.$emit('reduce', this.counter);
            }
        }
})

 

 

 

51、enter事件，经常用但经常忘记。还是记录一下把 

@keyup.enter="enterHandle"

 

50、简单的知识点，如何调用子组件的函数Methods

答案就是使用ref即可。

beforeDestroy () {
      // 切换页面时消灭计时器
      this.$refs.countdown.clearTimer()
}

 

49、使用vue-cli 配置 proxyTable 代理地址，实现跨域问题

路径在/config/index.js 中，找到dev.proxyTable。如下配置示例：

    proxyTable: {
        '/api': {
            // 我要请求的地址
            target: 'http://oatest.bujidele.com:8010/apitest/api/tydproject/doOld/',  
            //是否跨域 
            changeOrigin: true, 
            // 重写地址 
            pathRewrite: {
              '^/api': '/'
            }
        }
    }

 那么当我们请求 http://localhost:8888/api/ 的时候,就等于请求了 http://oatest.bujidele.com:8010/apitest/api/tydproject/doOld/

请注意上面的【pathRewrite】字段。这是什么意思呢。

我们再来看看下面的例子

 proxyTable: {
        '/api': {
           // 我要请求的地址
           target: 'http://192.168.14.29:31006/xindai/',  
           //是否跨域 
           changeOrigin: true, 
           // 重写地址 
           pathRewrite: {
             '^/api': '/api'
           }
       }
  },

如果是这样的话，当我们请求/api的时候，就等于请求了http://192.168.14.29:31006/xindai/api

这要看你要不要了，如果不要的话，直接换为'^/api': '/' 就好了

 

48、获取组件自己在父组件中的索引。

内置属性即可。this.index 。 

随便一提这些内置的属性应该多记一点，譬如this.$parent.xxxx 这些都是很实用的

 

47、通过js新建组件并且传入props： 

import Vue from 'vue';
import product from './index.vue';

let productComponent = Vue.extend(product);

export default (food, isShow, idx, ratings) => {
    new productComponent({
        el: '#goodss',
        propsData: {
            food,
            isShow,
            idx,
            ratings
        }
    });
}

 

46、axios 加入header之后，请求出现

Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(config => {
    config.headers['x-jwt-header'] = localStorage.token
    return config;
},error =>{
    alert("错误的传参", 'fail')
    return Promise.reject(error)
})

原因是后端没有开启对header的允许。php中输入以下代码即可：

header('Access-Control-Allow-Headers:x-jwt-header,content-type'); 

 

45、webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc (();  或者 Unexpected token: operator (>) 

解决方案就是将babel配置转义到 .babelrc 文件中。具体做法是在根目录新建 .babel，输入

{
    "presets": ["es2015"]
}

在webpack加载babel-loader的时候会自动加载.babelrc配置的。

 

44、如果不能看到源码来修复bug真心累。除非是通过场景重现的bug。否则定位不到错误行很惨。所以需要开启map。

在 /config/index.js 中，修改 productionSourceMap 为 true 即可。

 

43、尽管加入了babel-polyfill ，依然出现 【ReferenceError: Promise is not define】的问题。目前只在三星、金立手机出现这种问题。没办法，只能强行修复了。

npm install promise --save-dev

window.Promise = require('promise');

记得清除一下手机的缓存。

 

42、记一起和前端没什么卵关系的后端405问题

问题的关键点在于本来是POST请求，会变成OPTION请求，并且提示405报错，会类似跨域。并且只有某些手机机型才会（如Oppo系列）。

其实跨域的问题，如果在PHP只需要在头设置允许跨域即可。其他语言也类似。 

header("Access-Control-Allow-Origin:*");
或者
header("Access-Control-Allow-Origin:url地址");

 但.net据说也设置大致如上设置了，却不能轻易跨域，在开发环境中我甚至需要开启代理或浏览器非安全模式才可以跨域。

直到今天这个问题在线上彻底爆发出来。才认真研究。其原因就在于.net web.conf配置中，需要注释或删除这一句配置：

于是具体配置大致如下：

问题即可解决。无论线上和本地都可以顺利跨域了。其实就是个跨域的问题罢了，记录一下

 

41、记一次饿了么UI图标加载无效的问题。并且提示错误

Failed to decode downloaded font:

很显然，问题在于webpack的loader中。检查了一下发现有两个相同的file-loader的配置，删除其中一个即可。

 

40、记一次编译没反应、无进度、没有任何报错的提示，但后台却TM一直消耗内存的BUG:

控制台一直提示“building for production...”，而且spinner停止了动画！

由于没有任何的提示。况且项目的代码、结构、设计完全未知模糊的情况下，我只能按照unix的理念“使之运行、使之正确、使之快速”作为理论依据指导我来调试了。

按照这个理念，我最初设定的目标，就是让他正常的编译，无论结果是如何。所以我将main.js（入口文件）的代码尽可能删掉。只保存纯洁无比的app.vue组件。以及vue的初始化。就这样运行编译，果然可行！！而后我通过按照二分法。一步一步还原并删减一半的代码，运行npm run build。一步一步尝试。直到定位到最小单元的文件（result.vue），在这个文件中只有三个剑客，分别是template、script、css。他们一样没有逃过我的魔爪，一步步的删减，直到最后定位到了是css文件的错误。一个css文件居然能引发这种史诗级的错误？通过继续对css文件中的css代码进行二分法删减，最后发现。怎么会有一个“|”符号？于是把它删除，正常编译！

结果和过程都是美好的。但我觉得我这种调试方式也值得记录。

 

39、组件 vue-awesome-swiper 的坑

1、在vertical的场景模式下，默认的高度很奇怪，非常非常的大。完全没有规律。后来使用autoHeight好了一点。但依然有问题，问题在于它会根据swiper-slide内元素的高度自动变化叠加。依然会非常非常大。最后才知道。手动设置height即可解决。由于我的场景是fullpage页面，所以只需要设置height : window.innerHeight 即可。完整代码如下：

swiperOption: {
          direction : 'vertical',
          height : window.innerHeight,
          onTransitionStart: function (swiper){
                this.isHideIcon = swiper.activeIndex <= 3;
          }.bind(this)
}

 

2、在拖拽的过程中，我还发现另一个bug。有时候拖拽边缘。会导致没有很好的弹性滚动，而是像普通页面一样滑动导致错误了。后来检查才发现，是因为你手势滑动的区域不是元素覆盖的范围导致的。解决方案很简单，整个页面都让swiper覆盖即可。保证用户触碰的是swiper元素本身，而不是body、或者其他div元素

 

39、默认Vue-cli脚手架的工程，npm run build之后的工程是必须部署在服务器根目录中的，只能用类似localhost:8080/#/来访问。原因是资源的路径读取都是以根目录'/'，所以我们只需要修改静态资源的路径即可。打开工程目录中

/config/index.js

找到build属性中的assetsPublicPath，默认是“/” 修改为"./"即可

 

 

38、Error: [vuex] vuex requires a Promise polyfill in this browser. 与 babel-polyfill 的问题

事实上之前已经解决了。采用最笨重的解决方案就是npm install babel-polyfill 然后在webpack中如此设置：

entry: {
　　'babel-polyfill': 'babel-polyfill',
　　app: './src/main.js'
},

但在开发环境下，我们在IE11打开的时候依然有问题（但在现代浏览器中浏览居然没问题）。打开源码，可以看到是app.js先加载，然后才加载babel-polyfill. 其实在生产环境下（webpack编译之后）。可以正常运行。这是因为在webpack.prod.conf.js中的HtmlWebpackPlugin加入了 hunksSortMode: 'dependency' 属性。所以我们只要依样画葫芦。在webpack.dev.conf.js中找到HtmlWebpackPlugin加入了 hunksSortMode: 'dependency' 属性即可

 

37、好吧，其实36的理解是错误的，虽然解决了问题。但对于this.$set的理解是大错特错的。关键在于对vue的双向数据绑定太信赖而导致无视了原理。

https://segmentfault.com/a/1190000007787941?_ea=1459649

事实上，回忆一下我们在使用Vue的双向数据绑定的时候，我们首先需要在Data中配置属性，然后再绑定到template中。然后改变Data时，就会改变template。

但有没有经历过我这种情况，默认的Data的某个属性是空的，如 list: {}  我需要进行异步请求或者延迟操作之后，再给它赋值 list.fuck = 'fuck-Vue' 如果是这样的情况。你觉得template会更新么。

答案是否定的。这其实非常容易猜想到原因。Vue默认只会绑定Data中的数据，而你异步更新的Data。实质上只是更新了，但并没有绑定，所以template自然没有更新。那有没有解决方案呢？

有的。36的this.$set就是解决方案，它的作用是，添加绑定一个状态并且立刻更新template。也就是说，拿我的例子做说明，默认list: {} 当赋值的时候不再是单纯的this.list.fuck = 'fuck-Vue'; 而是 this.$set(this.list, 'fuck', 'fuck-vue');

这样即可解决，但需要注意一个问题： this.$set 不能添加或更新已有的属性，否则无效。什么意思呢？比如我的Data的list中，默认已经写有fuck这个属性了。如果你继续使用 this.$set(this.list, 'fuck', 'fuck-vue'); 则是无效的。

 

36、史诗级的知识点以及解决方案：一个复杂对象的变化，vue是不能监听到的，所以视图也不会随着改变？怎么办?

比如我有一个状态：

[

    {toggle: true, rotate: true},

    {toggle: false, rotate: false},

    {toggle: false, rotate: false}

]

当然这个状态是通过api获取的。通过v-for渲染后，当我改变数组中其中一个对象的一个属性时：

this.Model[index].rotate= !this.Model[index].rotate

对象确实有改变，但视图不会更新。为什么？ 详情阅读：https://cn.vuejs.org/v2/guide/reactivity.html

总之你只要知道，默认Vue是不能检测属性更新来刷新视图的。只有this.$set的方法来解决：https://cn.vuejs.org/v2/api/#Vue-set 

methods: {
    slideupList (index) {
        this.Model[index].rotate= !this.Model[index].rotate
        this.Model[index].toggle = !this.Model[index].toggle
        
        /**
         * 由于this.Model是对象数组，当其中一个对象变化的时候，vue不能监听到的，所以视图也不会刷新
         * this.$set 这个方法主要用于避开  Vue 不能检测属性更新的限制。
         * 但这个方法的使用需要注意几点:
         * - 我是对数组中的某个值（这个值是个对象）,直接重新赋值的。
         * 如果我这里直接对数组的某个对象中的某个属性赋值，那是不行的。
         * https://cn.vuejs.org/v2/api/#Vue-set
         * http://www.cnblogs.com/zhuzhenwei918/p/6893496.html
         * */
        this.$set(this.Model, index, this.Model[index])
    }
}

  

35、如何监听Vuex的state?  通过Computed + watch的组合 

 computed: {
          get_translateY() {
            return this.$store.state.translateY;
          }
        },
        watch: {
          get_translateY (val) {
             window.clearTimeout(this.Timer);
             this.isHeadAdd = true;
             this.hide = window.setTimeout(() => {
                 this.isHeadAdd = false;
             }, 1000)
          }
        }

  

34、vue-router的keep-alive缓存策略

 - keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 

# 第三方手册
http://www.jianshu.com/p/0b0222954483

# 官方手册
https://vuejs.org/v2/api/#keep-alive

注意include不能有空格，如

 
   
 

  

33、vuex中mapState的概念是什么？有点懵逼？？？

其实就是重命名而已，为了可以减少你输入的键盘，详细可以看看这篇博客:

http://blog.csdn.net/a641832648/article/details/62233213

 

32、就凭这个坑，我相信typescript会替换babel

Cannot set property requestCount of #