​使用uniapp开发的时候，总是会遇到这样的问题，就是普通的vue因为性能或者兼容问题，无法很好的实现需求，就比如视频播放，或者一些原生组件，在普通vue里会有层级问题。其次就是nvue的性能比vue强得多。

但是如果用纯nvue开发，那么又会面临样式支持少等情况，导致项目开发变得很慢。

所以，我一般会推荐vue和nvue在项目中混用，这其实并不会导致报错，或者代码混乱问题，只需要注意好隔离就行，利用uniapp的条件编译等手段。

初步操作

现在，加入有一个uniapp+vue的项目，我们创建一个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都用不了。

​