mpvueのいくつかのピットについて

微信ウィジェットのフレームワークはたくさんありますが、今はmpvueのいくつかの点を記録したいだけです.採坑の成功を祈ります.
微信小プログラムは文法規範、API、コンポーネントの外にあり、複数のコンポーネント化可能なcomponentがあるため、主な点は常にappに落ちている.json、app.wxss、app.jsと各ページとコンポーネントの構成は、同じようなもので、詳細は公式ドキュメントに移行します.
対照的に、mpvueはvueに基づいて微信ウィジェットのサポートを加え、loaderとコンパイルの面で多くのサポートを行い、符号化規範はvueを基準としている.
使用
vue-cliがmpvue/mpvue-quickstartテンプレートを生成しました.
オリジナルウィジェットに対してmpvueはコードディレクトリで主にメンテナンスされています.

App.vue:ウィジェットとしての作成ポイントとマウントポイント

main.js

app.json

vueモデルのコンポーネントページ

各ページのナビゲーションバー情報の構成
v1.1.1以下
各ページのmainを見つけます.js,export default対応コンテンツの追加

import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
export default {
  // v1.12     config   app.json
  config: {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "        ",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

v1.1.1以上
直接使用

main.js

main.json

動的代替:

wx.setNavigationBarTitle({
  title: '  '
})

FAQS
エラーmpvueはエントリappが見つかりません.jsonファイル
通常の状況:
npm run dev
mpvueのコンパイルを実行します
distディレクトリの下でappが自動的に生成されます.json
余談:依存パッケージをインストールするときやnpm run devのときに依存が欠けていることをヒントにしたら、node_modulesの下のファイルはすべて削除して、それから再びnpm intall簡単に乱暴に問題を解決します
解析:依存性が乏しいためappを自動的に生成しなかった.json
解決の道:packpageだけを必要とします.jsonのmpvue-loadeの後ろの'^'を外し、依存を再インストールすればいい.

npm install
npm run dev

npm run devのコンパイルに成功しませんでした
状況は次のとおりです.

$ npm run dev
> [email protected] dev /home/happy/Dev/coding/color-life
> node build/dev-server.js

次のようにしても解決できません.

1.npm run dev  
2.  module     
3.          

これは主にコンパイル時にコードが欠落していることです.
解決:
コンポーネントが純粋なtemplateしかない場合は、追加すればいいです.

  export default {}

v-show使用無効
v-showの特徴を分析する:

v-show単純な切り替え要素のcss属性display

のみ

は要素

をサポートしていません.

v-else

はサポートされていません.
v-showを使用すると、作成したコンポーネントにv-showを直接ダウンロードしやすくなります.

したがって、コンポーネントの明示的な状態はisShow応答状態に従うことはできません.
解決:
コンポーネントの外に1つの要素を含んで制御するだけです

科学普及:v-if直接コンポーネントの作成-破棄
slotを持つコンポーネントは自動コンパイルに成功しませんでした
コンパイルを閉じて再実行するだけ

npm run dev