區別：1、呼叫vue需要使用webview渲染方式，呼叫nvue使用的是weex方式的原生渲染；2、vue介面的css支援媒體查詢，nvue頁面的css不支援媒體查詢。 3、 nvue頁面皆採用flex版面方式，vue頁面可以有多種版面方式。
本文操作環境：windows10系統、uni-app2.5.1版，DELL G3電腦。
uniapp呼叫vue和nvue的區別是什麼
#uni-app是邏輯和渲染分離的，渲染層在app端提供了兩套排版引擎。
小程式方式的webview渲染，和weex方式的原生渲染，兩種渲染引擎可以自己依照需求選。
vue檔案走的webview渲染
#nvue走weex方式的原生渲染
元件和js寫法是一樣的，css不一樣，原生排版的能用的css必須是flex佈局
uni-app的App端內建了一個基於weex改進的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue頁面，則使用webview渲染；如果使用nvue頁面(native vue的縮寫)，則使用原生渲染。一個App中可以同時使用兩種頁面，例如首頁使用nvue，二級頁使用vue頁面，hello uni-app範例就是如此。
雖然nvue也可以多端編譯，輸出H5和小程序，但nvue的css寫法受限，所以如果你不開發App，那麼不需要使用nvue。
nvue 和 vue 相互通訊
在 uni-app 中，nvue 和 vue 頁面可以混搭使用。
推薦使用uni.o n , u n i . on,uni.on,uni.emit的方式進行頁面通訊
nvue注意事項
#1 、 nvue 頁面均採用flex 佈局，不支援其他佈局方式，不能使用百分比。需要注意的是flex 預設為垂直排列，即flex-direction: column，如需改變佈局方向可以使用flex-direction: row;改變為橫排
2、 在App.vue 中定義的全域樣式不會在nvue 頁面生效。
3、 目前不支援在 nvue 頁面使用 s css、less 等預編譯語言。
4、 無法在 style 中引入字體文件，nvue 中字體圖示的使用參考：weex 載入自訂字體。
5、 class 進行綁定時只支援陣列 語法（weex 限制）。
6、nvue 頁面跳轉 vue 頁面時，只能呼叫 uni-app 的 路由 API 進行跳轉。
7、 nvue 暫不支援運行在模擬器上。在 created 裡呼叫 uni-app 的 api 時，可能出現 launch webview id is not ready 錯誤，延時幾百毫秒再執行就不會報錯了。 nvue 頁面 titleNview 設為 false時，想要模擬狀態欄，可以參考：https://ask.dcloud.net.cn/article/35111。
8、 nvue 中不支援使用import 的方式引入外部css，需使用以下方式進行引入，注意：引入外部css 的style 節點下寫樣式是不會生效的，需要額外添加新的style節點。
<style src="@/common/test.css"></style>
<style>
.test {
color: #E96900;
}
</style>9、開發 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.groupEnd10、 在nvue 裡面不能直接在css中透過@font-face 這樣的方式引入字體檔案的，需要在js中使用dom 模組引入字體檔案,src欄位的url的括號內一定要使用單引號
const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "iconfont",
'src': "url('../../static/iconfont.ttf')"
});11、很多css樣式不支援簡寫
例如border
/* 错误 */
.class {
border: 1px red solid;
}
/* 正确 */
.class {
border-width: 1px;
border-style: solid;
border-color: red;
}image 設定border-radius
#在nvue 裡面不能給image設定border-radius，想要將矩形圖案變成圓形需要在image 外麵包一層div，程式碼如下：
<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
<image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image> </div>12、nvue 頁面控制顯隱只可以使用v-if不可以使用v -show
13、單位只支援px 不支援em，rem，pt，%，upx
寬度問題會自動把手機螢幕分成750份的寬1250份的高
推薦：《uni-app教學》
以上是uniapp呼叫vue和nvue的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
