使用uniapp开发的时候总是会遇到这样的问题就是普通的vue因为性能或者兼容问题无法很好的实现需求就比如视频播放或者一些原生组件在普通vue里会有层级问题。其次就是nvue的性能比vue强得多。但是如果用纯nvue开发那么又会面临样式支持少等情况导致项目开发变得很慢。所以我一般会推荐vue和nvue在项目中混用这其实并不会导致报错或者代码混乱问题只需要注意好隔离就行利用uniapp的条件编译等手段。初步操作现在加入有一个uniappvue的项目我们创建一个nvue文件创建完成后运行到内置浏览器不会有什么问题但是运行到安卓或者原生端将出现大量关于CSS的报错。为什么会这样因为nvue是将页面编译为原生代码存在的问题就是css的写法受限不支持的css将直接报错。所以要做的第一步就是隔离原本的css可通过如下的条件编译。/* #ifndef APP-PLUS-NVUE */ 内部的CSS代码在nvue下不运行 也就是项目原有的css /* #endif */ /* #ifdef APP-PLUS-NVUE */ 内部的代码只在nvue下运行。 /* #endif */比如我项目根目录的App.vue因为引入了ColorUI的组件库所以只要项目存在nvue页面就会大量报错所以我选择了在nvue下屏蔽。对于插件和js等也是同理。创建nvue页面加入有个页面兼容H5和小程序但是APP下不行怎么办可以通过nvue页面解决如下图所示创建两个同名文件只是后缀不一样。然后在pages.json里按如下这样写。{ path: pages/video/play, style: { app-plus: { nvue: true } } }这样当运行到H5和小程序的时候走的是play.vue运行到原生端时走的时nvue。不会存在任何冲突这也是官方推荐的模式。nvue页面调用方法和接口其实除开CSS之外nvue是支持大部分js插件的亲测不会有什么问题。但是需要注意的是在main.js定义的全局类不会在nvue生效比如我如下写在main.js的代码import API from ./utils/api.js import Net from ./utils/net.js Vue.prototype.$API API Vue.prototype.$Net Net普通的vue页面直接通过this.$API.xxx()和this.$Net.xxx()就可以调用方法但是在nvue不行需要在nvue页面另外引入。就比如如下我分别引入了本地数据缓存和api还有请求js这个和vue是共用的js完全兼容nvue。import API from /utils/api.js import Net from /utils/net.js import { localStorage } from ../../js_sdk/mp-storage/mp-storage/index.js只是调用方法变了。给nvue页面写样式这个我就不多说了其实核心就是做好和普通vue的隔离这样就不会报错。当然也就意味着同样的样式要写两套版本vue和nvue版而且nvue写样式写起来确实难受很多css都用不了。