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 プロジェクト パッケージャー。

vue-cli とは

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

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

npm install

npm run dev

npm run build

npm run build --report

# vue-cli プロジェクトがパッケージ化されると、app.js、manifest.js、vendor.js ファイルに含まれるコードを表示するページがブラウザーに自動的に表示されます。これを使用して、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 コマンド管理に使用されます。
[推奨関連ビデオ チュートリアル:

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

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