vue-cli プロジェクトの構築に使用されるテクノロジー

使用されるテクノロジー: 1. vue.js、vue-cli プロジェクトのコア、主な機能は双方向データ バインディングとコンポーネント システム; 2. vue-router、ルーティング フレームワーク; 3. vuex、プロジェクトによって開発された vue アプリケーション ステート マネージャー、4. axios、GET や POST などの http リクエストの開始に使用されます、5. vux、vue 用に特別に設計されたモバイル UI コンポーネント ライブラリ、6. Emit.js、vue イベントの管理に使用されますメカニズム ;7. Webpack、モジュールの読み込み、および vue-cli プロジェクト パッケージャー。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue-cli とは

vue-cli (通称: vue Scaffolding) は、vue エンジニアリング プロジェクトを迅速に生成するために vue によって公式に提供されるツールです。

特徴: ① すぐに使用可能、② webpack ベース、③ 機能が豊富で拡張が簡単、④ vue2 および vue3 プロジェクトの作成をサポート

vue-cli の中国語公式 Web サイトのホームページ: https://cli.vuejs.org/zh/

ビルドされた vue-cli プロジェクトに含まれるテクノロジー

1.vue.js : vue-cli プロジェクトのコアであり、主な機能は双方向のデータ バインディングとコンポーネント システムです。

2. vue-router: vue が公式に推奨するルーティング フレームワーク。

3. vuex: Vue.js アプリケーション プロジェクト専用に開発された状態マネージャーで、主に vue コンポーネント間で共有されるいくつかの変数とメソッドを維持するために使用されます。

4. axios (またはフェッチ、ajax): Promise の設計に基づいて、GET や POST などの http リクエストを開始するために使用されます。

5、vux など: vue 用に特別に設計されたモバイル UI コンポーネント ライブラリ。

6. vue イベント メカニズムを管理するための Emit.js ファイルを作成します。

7. webpack: モジュールの読み込みと vue-cli プロジェクト パッケージャー。

vue-cli プロジェクトで一般的に使用される npm コマンドは何ですか?

node_modules リソース パッケージをダウンロードするコマンド:

npm install

vue-cli 開発環境を開始する npm コマンド:

npm run dev

vue-cli npm を生成する運用環境のデプロイメント リソース コマンド:

npm run build

npm vue-cli 運用環境のデプロイメント リソース ファイルのサイズを表示するために使用されるコマンド:

npm run build --report

コマンドの効果:

# vue-cli プロジェクトがパッケージ化されると、app.js、manifest.js、vendor.js ファイルに含まれるコードを表示するページがブラウザーに自動的に表示されます。これを使用して、vue-cli 運用環境にデプロイされた静的リソースを最適化し、ページの読み込み速度を向上させることができます。

vue-cli プロジェクトの各フォルダーとファイルの目的

vue-cli ディレクトリ構造:

vue-cli ディレクトリ分析:

ビルド フォルダー: Webpack 関連の設定とスクリプトを保存するために使用されます。開発中、webpack.base.conf.js は、less、sass、およびその他の CSS プリコンパイル済みライブラリを構成するため、または UI ライブラリを構成するために、このフォルダーで時折のみ使用されます。
config フォルダー: 主に構成ファイルが保存され、開発環境とオンライン環境を区別するために使用されます。このフォルダー内の config.js は、開発環境のポート番号、本番環境のホット ロードを有効にするか静的リソースの相対パスを設定するかどうか、gzip 圧縮を有効にするかどうか、ファイル名とパスを設定するためによく使用されます。 npm run build コマンドなどによって生成される静的リソース。
dist フォルダー: デフォルトの npm run build コマンドは、実稼働デプロイメント用に生成された静的リソース ファイルをパッケージ化します。
node_modules: npm コマンドによってダウンロードされた開発環境と運用環境の依存関係パッケージを保存します。
src: プロジェクトのソースコードと参照が必要なリソースファイルを格納します。
assets 配下 src: CSS、JS、画像など、プロジェクトで使用する必要があるリソース ファイルを保存します。
src の下のコンポーネント: vue 開発でのいくつかの一般的なコンポーネント (header.vue、footer.vue など) が保存されます。
src の下に出力: 自分で設定した Vue 集中イベント管理メカニズム。
src の下のルーター: vue-router vue ルーティング設定ファイル。
src の下のサービス: 自己構成された vue リクエストのバックグラウンド インターフェイス メソッド。
page src の下: vue ページコンポーネントが存在するフォルダー。
src の下の util: vue 開発プロセスにいくつかのパブリック .js メソッドを保存します。
src の下の vuex: vue 用に特別に開発された状態マネージャーである vuex を格納します。
src の下の app.vue: ラベル を使用して、プロジェクト全体の .vue コンポーネントをレンダリングします。
src の下の main.js: vue-cli プロジェクトのエントリ ファイル。
index.html: プロジェクトのメタ ヘッダー情報を設定し、vue ノードをマウントするための
を提供します。
package.json: プロジェクトの開始とパッケージ化のための、node_modules リソース部門と npm コマンド管理に使用されます。
[推奨関連ビデオ チュートリアル:

vuejs エントリ チュートリアル

、Web フロントエンド エントリ]

以上がvue-cli プロジェクトの構築に使用されるテクノロジーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。