nuxtページルートの設定、ホームのマルチキャストコンポーネントの開発操作

4122 ワード

nuxt ルートの設定交互まき

前の章の内容では、AppHeader共通トップメニューナビゲーションバーのコンポーネントを開発しました。この章では、メニューナビゲーションのルートガイドによって、私達のページを配置します。
Pagesディレクトリに行きたいですが、私達は3つの[nuxt_]を作成しなければなりません。link_name].vueページファイルは、ルートナビゲーションに合わせてロードするページです。
はい、コマンドラインに入り、ページファイルを作成します。
1、windowsシステムでは次のコマンドが使えます。
for/r%v in(index.vue，joks.vue，about.vue)do type null>%v
2、linux/macシステムでは、以下のコマンドが使用できます。
touch index.vue jokes.vue about.vue
はい、次はプロジェクトをVsコードエディタにドラッグします。開発前に、vueプロジェクトの開発を支援するプラグインVeturをインストールします。エディタに入り、クリックします。
左側のメニューの拡張ボタン、またはショートカットキーctrl+shift+xを使って、左側に拡張アプリケーションストアのリストが現れます。上の検索ボックスにVeturを入力して車を返します。
最初の検索結果をクリックすると、右側にVeturの詳細が表示されます。上に設置されたボタンをクリックしてインストールします。私たちはこのプラグインが必要です。
続いて、私達は設定して、急速にvue基本的なファイル構造を生成して、私達はファイルの最初のオプション->ユーザーコードの断片が開いた後に、1つの検索ボックスがあって、私達はvueを入力します。エディタ会
デフォルトでvue.jsonを開きます。下の内容で上書きします。


{
 "Print to console": {
  "prefix": "vue",
  "body": [
   "<template>",
   " <div>$0</div>",
   "</template>",
   "",
   "<script>",
   "export default {",
    "data(){",
     " return {} ",
    "}",
   "",
   "}",
   "",
   "</script>",
   "<style scoped>",
   "</style>"
  ],
  "description": "Log output to console"
 }
}

次に、空白のファイルを新規作成します。vueファイル、または空白のファイルです。vueファイルにvueを入力して、tabキーを押すと、自動的に上のvueテンプレート構造が生成されます。
私たちはそれぞれindex.vue、jokes.vue、about.vueに対応するIndex Page、Jokes Page、About Pageの3つのフィールドを導入して、3つの異なるページコンポーネントを区別します。
次にメニューナビゲーションバーのナビゲーションリンクをクリックして、ページの切り替えがあるかどうかを確認したり、ルート名とデータベースコンポーネントのコマンドのマッチングルールを確認したりします。
トップページのマルチキャストコンポーネントの開発
まず、私達はindex.vueの中の小包のclassに

img-height=「480」の画像の高さ
background="菗abb"は、マルチキャストコンポーネントの背景色を設定します。
はい、効果を見に来ました。このラベルの中には、私達のルーレット画像と文字情報を載せています。その詳細な構成は以下の通りです。


<b-carousel-slide
 :caption="it.caption"
 :text="it.text"
 :img-src="it.img"
 v-for="(it,index) in sliders"
 v-bind:key="index"
 ></b-carousel-slide>

captionの意味は大タイトルで、textは紹介文字で、imgは表紙の交互放送画像です。
補足知識：Nuxt ServerError：Request failed with status code 500私の解決方法と考え方
一、問題の出所
ふだんnuxtを使って展開のオンラインはすべて正常に運行したので、たまにある日500の誤りを申し込みます。
Nuxt.js運転（npm run dev）のエラーは以下の通りです。

サーバエラーログは以下の通りです。
0|qu124; ERROR Request failed with status code 500:17
0|qu|atcreateErrormodules/axios/lib/core/createError.js:16:15
0|qu|atsettlemodules/axios/lib/core/settle.js:18:12
0|qu|atIncompingMessage.handleStreamEndmodules/axios/lib/adappers/http.js:201:11)
0|qu|atIncompingMessage.ement(events.js:187:15)
0|qu|at IncompingMessage.EventEmitter.emiit(domain.js:441:20)
0|qu|atendReadableNT(_ストリームreadable.js：1094:12）
0|qu|atprocess.utickCallback(internal/process/next_tick.js：63:19）
二、考え方を解決する
500ステータスコード：サーバ内部エラーで、要求が完了できませんでした。
一般的には、この問題はサーバのプログラムコードが間違った時に発生します。
じゃ、問題は後端にあります。インターフェースを調べてください。
三、解決方法
一つ一つの注釈コードは、ページの中の一つのインターフェースが間違っていることを発見しました。バックエンドの修正後、問題は解決されました。
要求インターフェースは以下の通りです。

一つ一つの注釈コードは比較的に不手際な方法であり、もしできれば、直接にコンソールのNetworkを見てエラーインターフェースを調べます。
四、まとめ
Nuxt.jsはサービス端末のレンダリングのフレームワークをするので、ページの中に一つのインターフェースがある限り、エラーを返します。フロントエンドの展示ページは崩壊します。
一つのインターフェースが間違っています。500のエラーを返します。直接的に位置決めできない問題は逐一検査が必要です。Nuxtがますます強くなることを望みます。
以上のnuxtページのルートの配置は、ホームページのロードショーコンポーネントの開発操作は、すべてのコンテンツを共有することです。

スーパーREALビデオプレーヤー

Shellタイミングで指定時間前のファイルを削除します。