vue 项目遇到的问题

1、Module not found: Error: Can't resolve 'stylus-loader' in...

写vue项目的时候也遇到过类似的问题 Module not found: Error: Can't resolve 'stylus-loader' in ...

错误原因：你需要在packjson文件中加上stylus-loader,和stylus，因为我们用stylus编码，而脚手架不是自动安装这两个，所以我们要先写明依赖，然后通过npm install进行安装

执行报错，先后执行

npm install stylus-loader css-loader style-loader --save-dev

npm install stylus

2、手机如何通过ip访问电脑上的vue项目

    查看config文件夹下的 index.js， 修改index.js,

    将host: 'localhost'改为

    host:‘0.0.0.0’

    重起项目 npm run dev

3、Eslint取消规则

4、文字垂直居中

   #content { display: table;}

  #content span { display: table-cell; vertical-align: middle;}

5、(饿了么高仿课程) let foodList = document.getElementsByclassName('food-list-hook');获取不到foodlist的length，索引不到值

在控制台打印foodList，我们是能看到数据的，返回了一个HTMLCollection对象，也有length，我在网上搜索了很久，了解了个大概，仅供参考。在案例中，我们是请求到数据，立马执行calculateHeight()函数，而包含.food-list-hook的li标签是通过v-for动态生成的，当我们执行calculateHeight函数时，DOM还没更新，而HTML DOM 中的 HTMLCollection 是即时 更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。所以我们看到的跟函数执行时的状态不一样。我观察到作者是在created里面调用的，我查看了vue的生命周期钩子 ，发现了另一个钩子，我注意到当中有一句话“由于数据更改导致的虚拟 DOM 重新渲染和打 补丁，在这之后会调用该钩子”，于是我将calculateHeight()函数写到了updated里面，解决了问题

后来找到更常规的方法

Vue.nextTick( [callback, context] )

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

     // DOM 还没有更新

   Vue.nextTick(function () {

        // DOM 更新了

    })

 将要执行的函数，包裹在nextTick里面

6、probs传参(父->子)

使用vue-router引入组件，向组件内传参，可在router-view标签中传入，然后，在组件中使用probs传入

//APP.vue

商品

:seller="seller" >

//goods.vue

export default{
props:{
seller:Object
}

}

7、ES6字符串扩展，通过${}将变量传入反引号` `里