标签：原生 uniapp nvue vue 使用 组件 页面
一. nvue的使用场景
- 如果你不开发App，那么不需要使用nvue
比如：nvue只能使用css选择器，而且有些写法受限 - 为了实现app页面的性能优化，因为在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染，原生更快
- 层级问题
解决前端控件无法覆盖原生控件的层级问题。（在vue页面中）当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用nvue更好。因为nvue页面全部都是原生组件，互相之间没有层级问题。
（或者在vue页面上也可以覆盖一个subnvue（一种非全屏的nvue页面覆盖在webview上），以解决App上的原生控件层级问题；
或者使用cover-view,但只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。） - 原生组件问题
map,video,live-pusher组件等，很多时候，官方都会推荐使用nvue，所以要注意一下。 - 其他
https://uniapp.dcloud.io/nvue-outline
二. nvue页面的写法
1. 新建页面
新建nvue页面，如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。
2. 开发页面
2.1 template
（1）可以使用到nvue专用组件，比如barcode和waterfall等
（2）只能使用v-if
（3）文本只能在text中,不能换行写内容，否则会出现无法去除的周边空白
（4）只能使用vue的数组语法，对象语法可以嵌套在里面，但class绑定的一定是数组
（5）图片使用image标签，支持使用base64，不支持svg格式图片
2.2 script
(1) 支持nvue的api，使用前导入模块，有uniapp内置插件也有第三方
(2) H5+,轻松调用手机的功能,nvue页面可直接使用plus的API，并且不需要等待plus ready。,http://www.html5plus.org/doc/h5p.html
(3) 支持uniapp的api,uni.navigateTo等
2.3 style
(1) 只能用flex布局，而且flex-direction是默认方向是column,可以全局设置https://uniapp.dcloud.io/collocation/manifest?id=nvue
(2) 只能用class选择器
(3) nvue组件默认是透明的，一定要用background-color,不然可能有重影
(4) 没有百分比，没有媒体查询
(5) 不能在 style 中引入字体文件，可以使用 DOM.addRule 以加载自定义字体
(6) 不支持在 nvue 页面使用 typescript/ts
(7) 尽量用原生导航
(8) 不支持在css里写背景图background-image
三. 总结
除了一些特殊考虑，涉及到app的东西，最好就是看下vue支不支持，不得已再用nvue。
以上总结于2022/2/27制定，由于uniapp会更新和优化，所以以上的总结可能会改变，所以这里只是整理了目前的存在的坑，详情还是以uniapp社区为主
标签：原生,uniapp,nvue,vue,使用,组件,页面 来源： https://www.cnblogs.com/listenMao/p/15949870.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。