最近幸运的参与了公司m站重构项目，项目使用了nuxt、vant
nuxt是基于vue的服务端渲染框架，服务端渲染有助于SEO。具体可以参考这篇博客。
vant是有赞的一个ui框架，封装了一些ui组件，改改样式还是挺好用的。
遇到的问题
1、v-lazy批量加载本地图片
v-lazy是vant封装vue的lazyload指令。当图片地址是本地图片时，懒加载无效。
搜了一圈，原因是涉及到webpack（nuxt自带）打包问题，所以要提前把图片引入
IMG: require("../static/about/pic.png")
因为本地图片很多，在页面这样批量引入不好看，于是把每个图片的地址写在一个JSON对象里，然后在页面通过引入JSON对象，在img标签中绑定对应的地址。
// common.js
export const lazyImgJSON = {
"tea": {
"high": {
a: require("../static/about/teacherPics/high/a.png"),
b: require("../static/about/teacherPics/high/b.png"),
c: require("../static/about/teacherPics/high/c.png"),
d: require("../static/about/teacherPics/high/d.png"),
g:require("../static/about/teacherPics/high/g.png")
}
}
// page.vue
<template>
<img class="new" v-lazy="tea.high.a">
</template>
<script>
import { lazyImgJSON } from '~/util/common'
<script>
这样就可以批量引入啦~
2、vue中对象和数组处理问题
这个坑是因为自己没认真看文档，vue文档中写到了数组更新检测 以及 对象更改检测注意事项
(1)数组
vue里数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse()方法，会触发视图更新！
直接给数组的index位置赋值修改或者直接修改长度不会立即触发视图更新！
解决方法：用set方法或者splice方法，像下面这样
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
(2)对象
Vue 不能检测对象属性的添加或删除，即不会立即触发视图更新。
解决方法：用set方法或者Object.assign
// set
Vue.set(vm.userProfile, 'age', 27)
// Object.assign
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
3、vue-touch引入遇到2个问题
（1）报错can't read property 'priority' of undefied
这个是因为vue和vue-touch版本问题，参见[vue-touch](https://github.com/vuejs/vue-touch/tree/next)的说明，2.0以后的vue使用下面的命令安装
npm install vue-touch@next
（2）报错hammerjs中window is not defined
这个最终在nuxt文档里找到了说明，戳这里
This is due to the server-side rendering. If you need to specify that you want to import a resource only on the client-side, you need to use the process.browser variable.
这是因为ssr。如果你需要引入一个只支持客户端的资源，你需要用process.browser变量。
//像这样
<script>
import ....
if (process.browser) {
Vue.use(require('vue-touch'), {name: 'v-touch'})
}
export default {
}
<script>
4、2地方加上最好加上res.status===0的判断
（1）第一处：请求的返回值，加上判断res.status === 0
（2）第二处：页面中将所用到的数据包一层判断 v-if ="res.status === 0 "
否则页面渲染的数据有可能会报undefined
每进入一个页面，控制台打印：
nuxt:render Rendering url /study/todoLive +34s
nuxt:render Data fetching /study/todoLive: 1ms +0ms
这个我也没搞懂原因，但是我猜想和控制台打印的这两行东西有关。
5、vue.prototype使用
很方便！
有时候需要处理一些列表数据，比如 分 转成 元， 时间戳的处理。
之前的处理数据方法是拿到数据（一般是列表），都循环处理这些。
现在的解决办法是在vue.prototype里添加处理方法，直接在页面渲染的地方调用处理方法。
栗子：
<div class="beginning-mod">
<div class="beginning">
<span class="time">{{citem.course.introduction}}</span>
<template v-if="citem.course.lecture_desc">
<em>|</em><span class="hour">{{citem.course.lecture_desc}}</span>
</template>
</div>
<div class="price">¥{{ fenToYuan(citem.order.price)}}</div>
</div>
<div class="teachers-price">
<div class="u-ellipsis teacher-list">
<span v-if="citem.course.teacher_name" class="teacher_name">主讲老师:{{citem.course.teacher_name}}</span>
<span v-if="citem.course.counselor_name" class="teacher_name">辅导老师:{{citem.course.counselor_name}}</span>
</div>
<div v-if="citem.order.orig_price !== citem.order.price" class="price">¥{{ fenToYuan(citem.order.orig_price)}}</div>
</div>
6、子组件method里取不到props
这个是因为props是动态的，父组件把接口返回的数据传给子组件。这时候用watch就可以解决啦~
props: {
calendar:Array
},
watch: {
calendar:function(val){
this.taskList = val
this.compareList()
}
}
watch监视props的变化，然后将变化的值赋给另一个全局变量。
7、列表数据处理
戳这里
8、vue日历插件
这个还没写
网友评论