vue.js 的学习

⭐️ ? ✨ ⚡️

技术栈

# 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浏览器兼容模式等 

 

 

---

  

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

 

86、watch route 无法生效的原因？

可能是因为父子路由的原因吧。建议用以下几个方案代替：

watch: {
  '$route': {
      deep: true,
      handler (newV, oldV) {
          this.$store.dispatch('Map/reset')
      }
  }
},

2、如果还是不行的话，用路由钩子：

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path === '/myBusiness') vm.$router.push('/')
      next()
    })
}

// 页面离开的时候，初始化一些参数配置
beforeRouteLeave  (to, from, next) {
    // 还原为全部选择框都显示
    this.$store.dispatch('list/onlyShowSelect')
    // 取消问题类型，默认为空
    this.$store.dispatch('list/eq_problemType')
    next();
},

 

 

 

85、vue编译插件，可以发布给人使用

$ vue-cli-service build --target lib --name w-basic-layout --dest lib packages/index.js

"scripts": {
　　"lib": "vue-cli-service build --target lib --name w-basic-layout --dest lib packages/index.js"
},

 

 

84、vuex 如果要dispatch另一个模块的actions时怎么办？ 只需要加入 {root: true} 即可

dispatch('Map/fuck', 'shit', {root: true})

 

 

83、vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题

// 超简易拷贝（如果是深拷贝还多此一举把get/set拷贝进去了，所以用简易拷贝即可）
let __VALUE__ = JSON.parse(JSON.stringify(state.problemReply))
// 加入部门回复详情
__VALUE__[orderId] = data.problemReply
// 更新，只能这样一波骚操作才能让computed和watch监听到。具体原因我稍后学习o(╥﹏╥)o。
state.problemReply = __VALUE__

 

82、 如何在index.html加载本地js文件？

将文件放置在 /static 中 ，编译的时候会一同打包在dist/static/ 中，所以你就可以在index.html中使用

<script src="./static/echarts.min.js">script>

 

81、深度作用选择器：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

vue组件会为template中的每个html元素加入 [data-v-xxxx] 属性来确保 css 作用本组件而不会污染全局，而如果你引用了第三方组件，默认只会对组件的最外层（div）加入这个属性，但第二层开始就没有效果了。如图所示： 第一层还有 data-v-17bb9a05, 但第二层的 .weui-cells 就没有了。

如果你希望通过如下方式修改 weui-cells。是没有效果的

除非你将scoped移出。或者新建一个没有scoped的style（一个.vue文件允许多个style）。这是因为，所有的scoped中的css最终编译出来都会变成这样：

.fuck[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]

解决方法还有另一个，那就是深度作用选择器：

 

重要的事情说三遍，如果你是scss之类的预编译css的话， >>> 要换成 /deep/

重要的事情说三遍，如果你是scss之类的预编译css的话， >>> 要换成 /deep/

重要的事情说三遍，如果你是scss之类的预编译css的话， >>> 要换成 /deep/

 

80、mapState的使用。其中 theme 是模块名。当然也可以忽略。

import { mapState } from 'vuex'

computed: {
    ...mapState('theme', ['findLastSixMonthAir', 'findLastSixMonthAirTown'])
},

 

79、computed + watch + vuex的组合，虽然一时爽，但也有问题，就是数据嵌套的太深的时候，没办法更新UI。又不可以用$set方案来解决。

但也有办法，那就是深拷贝赋值，然后在某一层赋值，还是可以更新UI的。

// 超简易拷贝（如果是深拷贝还多此一举把get/set拷贝进去了，所以用简易拷贝即可）
const v = JSON.parse(JSON.stringify(state.list.data))
// 加入回复字段
v[index].problemReply = data.problemReply
// 更新，只能监听到data属性，所以必须这样操作。不能这样:  state.list.data[index].problemReply = data.problemReply
state.list.data = v

 

 

 

78、由于一些嵌套特别深的数据，导致数据更新了。UI没有更新，我捉摸着有没有和react一样的立即更新UI的API呢 this.forceUpdate()呢？结果还真有：

this.$forceUpdate();

 

77、使用时使用它的事件@change，一边我又想拿到组件给我的回调，一边又想自己加入参数，所以就需要这样写了：

 

 @change="(data) => childCheckbox(data,index, item)" 

 

 

76、ElementUI 组件在 非.vue文件的使用，譬如router.js 文件中

import { Message  } from 'element-ui';

Message('这是一条信息 );

 

 

75、props如何双向属性绑定？

 

 

74、vue 中使用scoped关键字后样式不能修改第三方组件问题

https://blog.csdn.net/mr_hexs/article/details/80375244 

 

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;
}

"cell" tag="div" class="transition-group">
        
for='(item, index) in items' :key='item' class="cell">
            {{ 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

    
    
    
    

    
        

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

            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注册才可以使用的。 

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件title>
head>
<body>
<div id="app">
    <todo :todo-data="groceryList">todo>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript">script>
<script>
/**
 * 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。
 * 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
 * 最终还是要通过Vue.components注册才可以使用的。 
 */

// 构建一个子组件
var todoItem = Vue.extend({
    template: ` <li> {{ text }} </li> `,
    props: {
        text: {
            type: String,
            default: ''
        }
    }
})

// 构建一个父组件
var todoWarp = Vue.extend({
    template: `
        <ul>
            <todo-item 
                v-for="(item, index) in todoData"
                v-text="item.text"
            ></todo-item>
        </ul>
    `,
    props: {
      todoData: {
          type: Array,
          default: []
      }
    },
    // 局部注册子组件
    components: {
        todoItem: todoItem
    }
})

// 注册到全局
Vue.component('todo', todoWarp)

new Vue({
    el: '#app',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
        ]
    }
})
script>
html>

 

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

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

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

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件title>
head>
<body>
<div id="todoItem">div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript">script>
<script>

// 局部注册组件
var todoItem = Vue.extend({
  data: function () {
        return {
            todoData: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
            ]
        }
  },
  template: `
        <ul>
            <li v-for='(d, i) in todoData' :key="i">
                {{ d.text }}
            </li>
        </ul>
  `
});

// 请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
new todoItem({
  propsData: {
      todoData: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
      ]
  }
}).$mount('#todoItem')

script>
html>

 

53、Vue的实例属性

 

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

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

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js">script>
    <script src="./Components/Counter.js">script>
head>
<body>
    <div id="app">
        <p>总数量： {{ total }}p>
        <counter @add="handleGetTotal" @reduce="handleGetTotal">counter>
    div>
body>
<script>
    new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            handleGetTotal: function (v) {
                this.total = v;
            }
        }
    })
script>
html>

 

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即可。

ref="countdown">

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配置中，需要注释或删除这一句配置：

于是具体配置大致如下：

<handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    handlers>

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      customHeaders>
    httpProtocol>

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

 

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 #