uni-app 開發vue和nvue時，注意事項

vue注意事項

相比Web平臺， Vue.js 在 uni-app 中使用差別主要集中在兩個方面：
    新增：uni-app除了支持Vue實例的生命週期，還支持應用啓動、頁面顯示等生命週期
    受限：相比web平臺，部分功能受限，好比 v-html 指令，具體見下。（受限部分僅在App和小程序端受限，H5版不受限）


注意：
    不要在選項屬性或回調上使用箭頭函數，好比 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由於箭頭函數是和父級上下文綁定在一塊兒的，this 不會是如你作預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的。
    建議使用 uni-app 的 onReady代替 vue 的 mounted。
    建議使用 uni-app 的 onLoad 代替 vue 的 created。



注意事項
    .vue 和 .nvue 並非一個規範，所以一些在 .vue 中適用的方案並不適用於 .nvue。
    Vue 上掛載屬性，不能在 .nvue 中使用。
    .nvue 不支持 vuex
    若是但願 .vue 和 .nvue 共享一些數據的話，須要採用公用模塊的方案，分別在 .vue 和 .nvue 文件中引入。



非H5端不支持 Vue官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語法。

綁定的數據對象沒必要內聯定義在模板裏：
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}


注意：以:style=""這樣的方式設置px像素值，其值爲實際像素，不會被編譯器轉換。
此外還能夠用 computed 方法生成 class 或者 style 字符串，插入到頁面中，舉例說明：

<template>
    <!-- 支持 -->
    <view class="container" :class="computedClassStr"></view>
    <view class="container" :class="{active: isActive}"></view>

    <!-- 不支持 -->
    <view class="container" :class="computedClassObject"></view>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>


用在組件上
非H5端暫不支持在組件上使用 Class 與 Style 綁定



注意事項
    nvue 頁面均採用 flex 佈局，不支持其餘佈局方式，須要注意的是 flex 默認爲豎向排列，即 flex-direction: column。
    在 App.vue 中定義的全局樣式不會在 nvue 頁面生效。
    目前不支持在 nvue 頁面使用 scss、less 等預編譯語言。
    不能在 style 中引入字體文件，nvue 中字體圖標的使用參考：weex 加載自定義字體。
    class 進行綁定時只支持數組語法（weex 限制）。
    nvue 頁面跳轉 vue 頁面時，只能調用 uni-app 的 路由 API 進行跳轉。
    nvue 暫不支持運行在模擬器上。
    在 created 裏調用 uni-app 的 api 時，可能出現 launch webview id is not ready 錯誤，延時幾百毫秒再執行就不會報錯了。
    nvue 頁面 titleNview 設爲 false時，想要模擬狀態欄，能夠參考：https://ask.dcloud.net.cn/article/35111。
    nvue 中不支持使用 import 的方式引入外部 css，需使用以下方式進行引入，注意：引入外部 css 的 style 節點下寫樣式是不會生效的，須要額外添加新的 style 節點。、
    
      <style src="@/common/test.css"></style>
      <style>
          .test {
              color: #E96900;
          }
      </style>
      
      
      開發 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.groupEnd

nvue注意事項

nvue 頁面均採用 flex 佈局，不支持其餘佈局方式，須要注意的是 flex 默認爲豎向排列，即 flex-direction: column。
nvue 的各組件在安卓端默認是透明的，若是不設置background-color，可能會致使出現重影的問題。
在 App.vue 中定義的全局樣式不會在 nvue 頁面生效。
nvue 切換橫豎屏時可能從新計算 px，致使樣式出現問題，建議有 nvue 的頁面鎖定手機方向。
目前不支持在 nvue 頁面使用 scss、less 等預編譯語言。
不能在 style 中引入字體文件，nvue 中字體圖標的使用參考：weex 加載自定義字體。
class 進行綁定時只支持數組語法（weex 限制）。
nvue 頁面跳轉 vue 頁面時，只能調用  uni-app 的 路由 API 進行跳轉。
nvue 暫不支持運行在模擬器上。
在 created 裏調用 uni-app 的 api 時，可能出現 launch webview id is not ready 錯誤，延時幾百毫秒再執行就不會報錯了。
nvue 頁面 titleNview 設爲 false時，想要模擬狀態欄，能夠參考：https://ask.dcloud.net.cn/article/35111。
nvue 中不支持使用 import 的方式引入外部 css，需使用以下方式進行引入，注意：引入外部 css 的 style 節點下寫樣式是不會生效的，須要額外添加新的 style 節點。


  <style src="@/common/test.css"></style>
  <style>
      .test {
          color: #E96900;
      }
  </style>

開發 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.groupEnd