vue.js が大規模な単一ページ アプリケーションを構築する方法

この記事では、vue.js スキャフォールディング ツール vue-cli を使用して大規模な単一ページ アプリケーションを構築する方法を詳しく紹介します。必要な方は参考にしてください。

前提条件:

。使い慣れている Javascript + HTML5 + css3 を使用します。
ES2015 Module モジュール (エクスポート、インポート、エクスポート - デフォルト) を理解します。
nodejs、一般的な npm コマンド、npm スクリプトの使用法 (npm は vue プロジェクトのパッケージ管理に使用されます) の基本的な知識を理解します。
webpack パッケージ化ツール (一般的な構成オプションとローダーの概念) を理解します。 (webpack webpack.github.io/ はモジュール パッケージ化ツールです。これは、一連のファイル内の各ファイルをモジュールとして扱い、それらの依存関係を見つけて、デプロイ可能な静的リソースにパッケージ化します。webpack の使用には npm インストール方法も必要です）。

インストールを開始します:

vue.js のスキャフォールディング ツールである vue-cli を使用して、大規模な単一ページのアプリケーションを構築します。

次のコードを実行して、プロジェクトの基本的な構築を完了します (Webpack の設定、依存パッケージのインストール、および基本ディレクトリの生成)。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

メインディレクトリ:

├── build // Webpackの基本設定、開発環境の設定、本番環境の設定
§── config // パス、ポート、リバースプロキシの設定
§── dist // webpackのパッケージ化最終的な静的リソース
§──node_modules // npm によってインストールされる依存関係パッケージ
§── src // フロントエンドのメインファイル
│ ├── アセット // 静的リソース
│ │ │ §── font
│ │ §── img | §── ストア // グローバル変数
│ §── App.vue // アプリコンポーネント
│ §── main.js メインエントリファイル
§── static // 静的ファイル
§── .babelrc // Babel の設定項目
§── . editorconfig // エディタの設定項目
§── .gitignore // 構文チェックを無視するディレクトリ
§──index.html // エントリページ
§── package.json // プロジェクトの説明および依存関係
パッケージ。json ファイルの説明: プロジェクトの説明と依存関係

1. スクリプト: プロジェクトをコンパイルするためのいくつかのコマンド

例: npm run dev を実行します。つまり、スクリプト内の対応するノード build/dev-server.js を実行します。 。

2. 依存関係: プロジェクトがリリースされたときの依存関係

例: npm install wx --save を実行します。つまり、依存モジュール wx をインストールします。

3. devDependency: プロジェクト開発中の依存関係

例: npm install sass --save-dev を実行します。つまり、依存モジュール sass をインストールします。

添付: npm 関連の手順:

npm は、Node.js のバージョン管理および依存関係パッケージ管理ツールで、ノード環境を使用して、フロントエンド構築プロジェクトに必要な依存関係パッケージをインストールします。

npm インストールのダウンロード速度が遅すぎるため、淘宝網ミラー cnpm インストールを使用してすばやくインストールしてください。設定方法:

プロジェクト読み込みプロセス:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

1.index.htmlページ

現在の構築プロジェクトはSPA(シングルページアプリケーション)であり、index.htmlページはメタ用の入り口ページです。およびその他の関連ページの構成。

ページの

はメインコンポーネントをマウントします。

2. main.js: メインエントリファイル

注: webpack.base.config -> エントリ: { app: './src/main.js'} で設定します

このファイルは vue インスタンスを初期化し、対応するモジュール (インポートする前に package.json で構成とインストールを確認する必要があります)、main.js の導入と手順:

import Vue from 'vue' // Import vue

import App from './App' / / メインコンポーネント App.vue を導入します

import router from './router' // ルーティング設定ファイルをインポートします

import axios from 'axios' // ネットワークリクエストツール axios を導入します

3. App.vue:メイン コンポーネント

は、index.html エントリ ページにマウントされ、main.js メイン エントリ ファイルに導入されます。

他のコンポーネント (例: /src/components/xxx.vue) を作成した後、ルーティング設定を通じて現在のメインコンポーネントでレンダリングできます。

4. ルート設定 vue-router

ルート設定: コンポーネントをルート (ルート) にマップし、それらをレンダリングする場所を vue-router に指示します

npm install vue-router

import Vue from 'vue'

import Router 「vue-router」から

Vue.use(ルーター)

// 1. (ルーティング) コンポーネントを定義します: インポートします (現在のアプリケーションの単一ファイル コンポーネント)。
import Home from '../components/Home.vue'

// 2. ルートを定義してルーター インスタンスを作成し、`routes` 設定を渡します
// 各ルートはコンポーネントをマップする必要があります。
var router = {}

export デフォルトルーター = new Router({
ルート: [
{
] パス: '/',
名前: 'home',
コンポーネント: Home
}
]
})

/ / 3. main.js メイン エントリ ファイルにルート インスタンスを作成してマウントします。
// ルーター構成パラメーターを介してルートを挿入することを忘れないでください。
// これにより、アプリケーション全体がルーティング機能を持つようになります

new Vue({
el: '#app',
router,
template: ' ',
コンポーネント: { App }
})

// これで、アプリケーションが開始されました。

上記は私があなたのためにまとめたものです。

関連記事:

Vue-Router パターンとフックの使用方法 (詳細なチュートリアル)

vue-router を使用して vue-cli で下部ナビゲーション バーを構築する (詳細なチュートリアル)

Using select in AngularJS データの読み込みとデフォルト値の選択方法はどうすればいいですか？

以上がvue.js が大規模な単一ページ アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。