nvue 是什么

发布时间：2023-04-25 08:53:09 所属栏目：教程来源：

导读：nvue 是 native vue 的缩写，可以理解为 uni-app 的一种渲染方式。在 App 端，如果是 vue页面，使用的是小程序方式的 webview 渲染，如果是 nvue 页面，则使用 weex 方式的原生渲染。

使用 weex 方式的原生渲染，

nvue 是 native vue 的缩写，可以理解为 uni-app 的一种渲染方式。在 App 端，如果是 vue页面，使用的是小程序方式的 webview 渲染，如果是 nvue 页面，则使用 weex 方式的原生渲染。

使用 weex 方式的原生渲染，其实就是在 weex 的基础上封装了 uni-app 框架的 API，提供了App 端的原生渲染能力。nvue 常用于在 App 端给一些使用 vue 页面表现不佳的场景作为强化补充。

有很多同学之前没有接触过 weex，我们先来了解一下。

weex 是什么？
weex 也是比较流行的一个 Web 开发框架，也可以提供跨平台开发方案，实现一份代码同时在移动端、Web端同时运行的效果。但是 weex 有一个很大的问题就是它只是一个高性能的渲染器，没有足够的API能力。

nvue 就解决了 weex 的这个问题，weex 支持的东西，在 nvue 里大多都是支持的，并且 nvue 提供了丰富的插件生态，让前端工程师可以直接开发完整 App。

vue、nvue 页面可以共存吗？
一个项目中可以同时存在 vue 和 nvue 页面。比如项目首页使用的是nvue 页面，而二级页则使用 vue 页面。

如果一个页面路由下出现同名的 vue 和 nvue 文件，App 端会使用 nvue 页面，非 App 端会使用 vue 页面。

nvue 页面的组件和 JavaScript 的写法与 vue 页面是一样的，但是 css写法有一些区别，nvue 页面的 css 均采用 flex 布局，不支持其他布局方式。具体区别下面我们来详细讲解。

vue 和 nvue 的开发区别
在 HBuilderX 编辑器中进行页面创建时，可以选择创建为 vue 页面还是 nvue页面。vue 页面与 nvue 页面虽然可以在同一个 uni-app 项目中共存，但是这两种页面的开发还是有区别的，我们进行项目开发的时候需要注意一下。

nvue 的 css 写法受限
虽然 nvue 也可以多端编译，但是在 nvue 页面编写 css 没有在 vue 页面方便。nvue 页面的 css 写法是受限的。来看一下在 nvue 页面下，正确和错误的 css 写法实例：

border 不支持简写，在 nvue 中需要拆分
/* 错误写法 */
.class {
border: px black solid;
}
/* 正确写法 */
.class {
border-width: px;
border-style: solid;
border-color: black;
}

选择器只能选择单类
比如我们给下面的 HTML 代码添加样式。

<div class='imooc'>
<text class=’imooc-text’>网</text>
</div>
我们要给 <div> 的下一级 <text> 添加样式，不能直接 .imooc>text 这样写，需要给 <text> 单独添加一个样式属性，单独给这个属性定义样式。下面来演示一下在 nvue 页面添加样式的正确和错误的写法。

/* 错误写法 */
.imooc>text {
background-color: green;
border-width: px;
border-style: solid;
border-color: black;
}
/* 正确写法 */
.imooc {
border-width: px;
border-style: solid;
border-color: black;
}
.imooc-text {
background-color: green;
}

引入样式文件
在 nvue 页面不能直接使用 import 引入样式文件。并且在 App.vue 文件中中定义的全局样式不会在 nvue 页面生效，nvue 页面的全局样式需要我们手动引入。

/* 错误写法 */
<style>
@import "@/main.css";
</style>
/* 正确写法 */
<style src="@/main.css">
</style>

不支持预编译语言
在 nvue 页面不支持使用 scss、less 等预编译语言。

/* 错误写法 */
<style lang="scss">
</style>

引入字体文件
在 nvue 中，不能在 <style> 标签中直接引入字体文件，需要用 weex 来加载字体。
实例：

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "iconfont",
'src': "url('./font.ttf')"
});

nvue 和 vue 相互通讯
如果使用 vue 就能实现项目需求，并且对项目性能没有很高的要求，我们尽量只使用 vue 来进行开发，不建议使用 nvue 来开发项目。因为 nvue 除了 css 写法受限之外，在 vue 和 nvue 页面混用的项目中，通讯也是一个大问题。

下面来看看在 vue 和 nvue 页面混用的项目中，nvue 和 vue 如何相互通讯。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!