uni-app 开发vue和nvue时，注意事项
vue注意事项相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面： 新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期 受限：相比web平台，部分功能受限，比如 v-html 指令，具体见下。（受限部分仅在App和小程序端受限，H5版不受限）注意： 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。 建议使用 uni-app 的 onReady代替 vue 的 mounted。 建议使用 uni-app 的 onLoad 代替 vue 的 created。注意事项 .vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性，不能在 .nvue 中使用。 .nvue 不支持 vuex 如果希望 .vue 和 .nvue 共享一些数据的话，需要采用公用模块的方案，分别在 .vue 和 .nvue 文件中引入。非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。绑定的数据对象不必内联定义在模板里：<div v-bind:class=“classObject”></div>data: { classObject: { active: true, ’text-danger’: false }}注意：以:style=““这样的方式设置px像素值，其值为实际像素，不会被编译器转换。此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：<template> <!– 支持 –> <view class=“container” :class=“computedClassStr”></view> <view class=“container” :class="{active: isActive}"></view> <!– 不支持 –> <view class=“container” :class=“computedClassObject”></view></template><script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? ‘active’ : ’’ }, computedClassObject () { return { active: this.isActive } } } }</script>用在组件上非H5端暂不支持在组件上使用 Class 与 Style 绑定注意事项 nvue 页面均采用 flex 布局，不支持其他布局方式，需要注意的是 flex 默认为竖向排列，即 flex-direction: column。 在 App.vue 中定义的全局样式不会在 nvue 页面生效。 目前不支持在 nvue 页面使用 scss、less 等预编译语言。 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。 class 进行绑定时只支持数组语法（weex 限制）。 nvue 页面跳转 vue 页面时，只能调用 uni-app 的 路由 API 进行跳转。 nvue 暂不支持运行在模拟器上。 在 created 里调用 uni-app 的 api 时，可能出现 launch webview id is not ready 错误，延时几百毫秒再执行就不会报错了。 nvue 页面 titleNview 设为 false时，想要模拟状态栏，可以参考：https://ask.dcloud.net.cn/article/35111。 nvue 中不支持使用 import 的方式引入外部 css，需使用如下方式进行引入，注意：引入外部 css 的 style 节点下写样式是不会生效的，需要额外添加新的 style 节点。、 <style src=”@/common/test.css”></style> <style> .test { color: #E96900; } </style> 开发 nvue 时，若遇到如下错误，是因为一个 uni-app 里必须有一个 vue 页面，在项目里新建一个空白的 vue 页面即可解决此问题。 Uncaught Error: module “common/vendor.js” is not defined 20:31:58.664 Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误 20:31:58.687 Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task. 20:31:58.706 console.groupEndnvue注意事项nvue 页面均采用 flex 布局，不支持其他布局方式，需要注意的是 flex 默认为竖向排列，即 flex-direction: column。nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题。在 App.vue 中定义的全局样式不会在 nvue 页面生效。nvue 切换横竖屏时可能重新计算 px，导致样式出现问题，建议有 nvue 的页面锁定手机方向。目前不支持在 nvue 页面使用 scss、less 等预编译语言。不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。class 进行绑定时只支持数组语法（weex 限制）。nvue 页面跳转 vue 页面时，只能调用 uni-app 的 路由 API 进行跳转。nvue 暂不支持运行在模拟器上。在 created 里调用 uni-app 的 api 时，可能出现 launch webview id is not ready 错误，延时几百毫秒再执行就不会报错了。nvue 页面 titleNview 设为 false时，想要模拟状态栏，可以参考：https://ask.dcloud.net.cn/article/35111。nvue 中不支持使用 import 的方式引入外部 css，需使用如下方式进行引入，注意：引入外部 css 的 style 节点下写样式是不会生效的，需要额外添加新的 style 节点。 <style src="@/common/test.css"></style> <style> .test { color: #E96900; } </style>开发 nvue 时，若遇到如下错误，是因为一个 uni-app 里必须有一个 vue 页面，在项目里新建一个空白的 vue 页面即可解决此问题。Uncaught Error: module “common/vendor.js” is not defined20:31:58.664 Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误20:31:58.687 Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.20:31:58.706 console.groupEnd ...