[Vue] vue-cli を使用して SPA プロジェクトのルーティングとネストされたルーティングを構築する

1. SPAプロジェクトの構築

1. 事前準備

事前準備として、Node.js をセットアップしてテストします。
node -v
npm -v

2. Vue-cli を使用してスパプロジェクトを構築する

2.1. Vue-cliとは何ですか?

Vue CLI は、Vue.js に基づいた公式のスキャフォールディングツールであり、vue.js+webpack プロジェクトテンプレートを自動的に生成するために使用され、開発者が Vue.js プロジェクトのインフラストラクチャを迅速に構築するのに役立ち、一連の開発ツールと構成オプションを提供します。Vue CLI には、コマンドラインインターフェイスとグラフィカルインターフェイスの 2 つの方法が用意されており、開発者は独自の好みに応じて使用を選択できます。Vue CLI を使用すると、プロジェクトの初期化、依存関係管理、開発とデバッグ、ビルドとパッケージ化などの一般的な開発タスクを簡単に実行できるため、Vue.js アプリケーションの開発プロセスが簡素化され、開発効率が向上します。

作成コマンドは以下の通りです。
 vue init webpack xxx
xxx はそれ自体のプロジェクトの名前を作成します

まず、vue、vue-cli、webpack、node などの必要な環境をインストールする必要があります。

2.2. vue-cliのインストール

Win + R CMD コマンドウィンドウに入り、npm install -g vue-cliコマンドを入力します。

「npm install webpack -g」と入力します。

インストールが成功すると、次のファイルが表示されます。

ビュー

view.cmd

vue-init

vue-init.cmd

vue-list

vue-list.cmd

インストールが完了したら、コマンドウィンドウを開き、「vue -V」と入力します(ここでは大文字の「V」に注意してください)。対応するバージョン番号が表示されれば、インストールは成功です。

2.3. スキャフォールディング vue-cli を使用してプロジェクトをビルドする

プロジェクトのスケルトンを作成します。

このスケルトンを配置するパスを見つけます

ディレクトリCMDを入力してコマンドウィンドウに入ります。

vue init webpack xxx : xxx はプロジェクト名です。プロジェクト名には中国語や大文字は使用できません。ターミナルに「質疑応答」モードが表示されます。

cmd コマンドラインウィンドウに中国語の文字化けが表示されます。これは、cmdコマンドラインウィンドウの文字エンコーディングの不一致が原因で発生します。

cmdウィンドウの文字エンコーディングをUTF-8に        変更し、コマンドラインで実行します: chcp 65001

        中国語に戻す: chcp 936
        これら 2 つのコマンドは現在のウィンドウでのみ有効で、再起動後に以前のエンコーディングが復元されます。

「一問一答」モード

プロジェクト名: プロジェクト名。入力時のデフォルトの名前は spa1 です。Enter キーを押すだけです。

プロジェクトの説明: プロジェクトの説明。Enter キーを押すだけです

著者: 著者、何気なく入力するか、直接 Enter キーを押してください

Vue ビルド: 多肢選択の質問、通常は最初の質問を選択します

実行してコンパイルすると、公式で推奨されているのでこれを選択します。

実行のみの場合、すでに推奨事項がある場合は、最初の推奨事項を選択します。

vue-router のインストール: vue-router が必要かどうか

使用する Y を選択すると、生成されたプロジェクトに関連するルーティング構成ファイルが含まれるようになります。

ESLint を使用してコードをリントする: コードのエラーとスタイルを制限するために ESLint を使用するかどうか。

初心者の場合、通常は N を入力しますが、これは通常、実際のプロジェクトで使用され、複数の開発者が一貫した構文を実現できるようにします。

単体テストのセットアップ: 単体テストをインストールするかどうか; N

Nightwatch で e2e テストをセットアップしますか?: e2e テストをインストールするかどうか; N

プロジェクトの作成後に「npm install」を実行する必要がありますか? (推奨) (矢印キーを使用)

最初の項目「はい、NPM を使用します」は、依存関係のインストールに npm install を使用するかどうかです。

すべてを選択し、Enter キーを押してプロジェクトを生成します。プロジェクトの作成が完了したことを示す次の内容が表示されます。そのまま待ちます。

上記のコマンドを実行した後、現在のパスを SPA フォルダーに変更する必要があります。

cd gq_spa : gq_spa フォルダーへのパスを変更します。

npm install : プロジェクトに必要なすべての npm モジュールをインストールします

プロジェクトを開始してアクセスする

「npm run dev」と入力します

開始を待っています

上記のアドレスhttp://localhost:8080/をコピーし、ブラウザを入力してアクセスします。

最後に、当社のプログラミングソフトウェアを使用して、

2.4. Vue プロジェクト構造の説明

build フォルダー: このフォルダーは主に Webpack の一部の構成用です。
1. webpack.base.conf.js : webpackの基本設定、開発環境、運用環境はすべてこれに依存します
2. webpack.dev.conf.js : webpack開発環境の設定
3. webpack.prod.conf.js : webpack 実稼働環境の構成
4. build.js : 本番環境構築スクリプト
5. vue-loader.conf.js : このファイルは、.vue ファイルを処理するための構成ファイルです。
設定フォルダー
1. dev.env.js : 開発環境を構成する
2. prod.env.js : 運用環境を構成する
3. Index.js : このファイルはプロキシサーバーを構成します。例: ポート番号の変更
node_modules フォルダー: npm インストール中に package.json 構成に従って生成された npm インストールパッケージを保存するフォルダー。
src フォルダー: ソースコードディレクトリ (開発で最もよく使用されるフォルダー)
1. アセット: 共有スタイルと画像
2. コンポーネント: ビジネスコードが格納される場所。コンポーネントに分割されます。ページはコンポーネントであり、ページには多くのコンポーネントも含まれます。
3. ルーター: ルーティングの設定
4. App.vue : vue ファイル入力インターフェイス
5. main.js : App.vue に対応する vue インスタンスを作成します。これはエントリファイルでもあり、webpack.base.config.js のエントリ構成に対応します。
静的フォルダー: 保存されたファイルは webpack によって処理されず、直接参照できます。たとえば、swf ファイルを参照したい場合、swf サフィックス名のファイルを処理するように webpack のローダーを設定するか、直接参照できます。参照用に swf ファイルをこのフォルダーに置きます。
package.json : このファイルには、スクリプト内のコマンドの設定と依存関係、および devDependency の 2 つの便利な部分があります。これらは、それぞれグローバルにダウンロードされた依存関係パッケージとローカルにダウンロードされた依存関係パッケージに対応します。

3. Vue ファイルとは何ですか?

vue ファイルは、HTMLのような構文を使用して Vue コンポーネントを記述するカスタムファイルタイプです。各 .vue ファイルには、 <template>、<script>、<style>の 3 種類のトップレベル言語ブロックが含まれています。これら 3 つの部分はそれぞれhtml、js、cssを表します。

2. SPA プロジェクトはルーティングを使用します

これまでの手順:

Vue.vue-router の js 依存関係を必ず導入してください。

まず、コンポーネントを定義する必要があります (つまり、さまざまなページ効果を表示するため)。

さまざまなコンポーネントをコンテナーに入れる必要がある (ルーティングコレクション)

ルートのコレクションをルーターに組み立てる

ルートを Vue インスタンスにマウントします

アンカーポイントを定義する

ジャンプ

今の手順:

1.依存性

main.jsではルートもマウントされているので、心配する必要はありません。

2. コンポーネントを定義する

コンポーネントフォルダーに、必要な新しい vue ファイルを作成します。

3. コンテナを定義する

vue ファイルの<template> にはルートノードが 1 つだけ存在します。

<script>
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

4.ルーターに組み立てる

<script>
export default {
  name: 'Index',
  data() {
    return {
      msg: '欢迎来到网站的首页'
    }
  }
}
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
export default {
  name: 'home',
  data() {
    return {
      msg: '欢迎来到网站的介绍部分'
    }
  }
}
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

5. ルーティング関係を定義する

ルーターフォルダー内のindex.jsファイルでルーティング関係を定義します。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/Home',
      name: 'Home',
      component: Home
    }, {
      path: '/Index',
      name: 'Index',
      component: Index
    }
  ]
})

独自の書面による関係を定義する

6. アンカーポイントを定義する

App.vueでアンカーポイントを定義する

<template>
  <div id="app">
    <img src="./assets/logo.png"><br>
    <router-link to="/Index">首页</router-link>
    <router-link to="/Home">介绍</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7. テスト

3. SPA プロジェクトはネストされたルーティングを使用します

1. 最終的な表示効果

2. 手順

2.1. アンカーポイントを定義する

定義する必要があるページ定義アンカーを選択します

2.2. コンテナの組み立てと定義

コンテナを定義し、必要なコンテンツをいくつかの簡単な手順で組み立てます

2.3. 関係の定義

独自の関係を追加する

後から直接追加することはできません。children配列を使用して指定されたページに追加する必要があります。そうしないと、必要な効果を表示できません。

2.4. テスト

最後に、エフェクトの 1 つを紹介します。

共有は以上です。読んでいただいた皆様、ありがとうございました。

皆さんもコメント欄で議論してください。！！