Vue-cli スキャフォールディング ツールの使用法とプロジェクト構成の手順

Vue-cli スキャフォールディング ツールの使用法とプロジェクト構成手順

フロントエンド テクノロジの継続的な開発に伴い、フロントエンド フレームワークは開発者からますます注目を集めています。 Vue.js はフロントエンド フレームワークのリーダーとして、さまざまな Web アプリケーションの開発に広く使用されています。 Vue-cli は、Vue.js によって公式に提供されているコマンド ライン ベースのスキャフォールディングであり、開発者が Vue.js プロジェクト構造を迅速に初期化するのに役立ち、ビジネス開発にさらに集中できるようになります。この記事では、Vue-cliのインストールと使い方、基本的なプロジェクト構成を紹介します。

1. Vue-cli のインストール

Node.js をインストールしていない場合は、最初に Node.js をインストールする必要があります。 Node.jsのインストール方法はご自身で検索してください。

Node.js をインストールした後、コマンド ラインに次のコマンドを入力して Vue-cli をインストールします。

npm install -g vue-cli

このコマンドは、グローバル環境に vue-cli をインストールします。

注: インストール プロセス中に権限が不十分な場合は、sudo コマンドを使用するか、管理者としてコマンド ラインを実行してください。

2. Vue-cli を使用してプロジェクトを作成する

Vue-cli をインストールしたら、それを使用してプロジェクトを作成できるようになります。コマンド ラインに次のコマンドを入力して、Webpack テンプレートに基づいて Vue.js プロジェクトを作成します:

vue init webpack my-project

このコマンドを実行すると、プロジェクト名、プロジェクトの説明、作成者などの質問が表示されます。 、など、自分のニーズに応じて入力できます。入力すると、プロジェクト テンプレートが作成されます。

依存関係のインストール:

npm install

上記のコマンドを実行すると、依存関係が package.json からインストールされます。

プロジェクトの実行:

npm run dev

3. 基本的なプロジェクト構成

1. プロジェクト構造

• build: プロジェクトの構築とパッケージング関連の構成フォルダー
• config: プロジェクト構成フォルダー
• node_modules: プロジェクトの依存関係パッケージ フォルダー
• src: プロジェクト コード フォルダー (コンポーネント、テンプレート、静的リソースなどを含む)
• static: 画像、フォントなどのプロジェクトの静的リソース フォルダー。
#test: プロジェクトのテスト フォルダー
• .babelrc: Babel 構成ファイル
• 。 editorconfig : コード スタイル設定ファイル
• .gitignore: Git バージョン管理無視ファイル
• .postcssrc.js: PostCSS 設定ファイル
• index.html: プロジェクト ページ エントリ ファイル
package.json: プロジェクト構成ファイル

環境変数構成

プロジェクトには、開発環境など、さまざまな環境変数を設定できます。テスト環境と本番環境。 Vue-cli はデフォルトで、開発 (開発環境)、テスト (テスト環境)、およびプロダクション (実稼働環境) の 3 つの環境モードを提供します。

プロジェクト ルート ディレクトリの

config フォルダーには、さまざまな環境の構成情報が含まれる index.js ファイルがあります。必要に応じて、対応する構成情報を変更できます。

たとえば、

index.js ファイルで開発環境と運用環境に異なる API アドレスを設定できます。

module.exports = {
  // 开发环境
  dev: {
    env: require('./dev.env'),
    port: 8080,
    api: 'http://localhost:3000'
    ...
  },
  // 生产环境
  build: {
    env: require('./prod.env'),
    api: 'http://api.example.com'
    ...
  }
}

コード内でプロセスを渡すことができます。 env.NODE_ENV を使用して、現在の環境と対応する API アドレスを取得します:

const API_URL = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/api/'

Vuex

Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。ログインステータス、言語、テーマなどのグローバルステータスを管理するために使用されます。

プロジェクト テンプレートを作成するときに、Vuex を使用するかどうかを選択でき、プロジェクト内でいつでも Vuex を追加または削除できます。

Vuex のインストール:

npm install vuex --save

プロジェクトで Vuex を使用するには、まず

main.js ファイルに Vuex を導入し、Vue インスタンスに登録する必要があります:

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

次に、

src ディレクトリ配下に新規ストアディレクトリを作成し、このディレクトリに各モジュールの状態管理を記述します。

たとえば、プロジェクトにログイン ステータスを保存するモジュールを管理する必要があります:

export default {
  state: {
    isLogged: false,
    user: {}
  },
  mutations: {
    SET_LOGIN_STATUS (state, payload) {
      state.isLogged = payload.isLogged
      state.user = payload.user
    }
  }
}

このステータス管理を使用する必要がある場合、次の方法でステータスを取得および変更できます。 :

// 获取状态
this.$store.state.isLogged

// 修改状态
this.$store.commit('SET_LOGIN_STATUS', {
  isLogged: true,
  user: {
    name: 'Tom',
    age: 18
  }
})

まとめ

Vue-cli は、すぐに使えるスキャフォールディング機能を提供し、Vue.js プロジェクトを迅速に構築および開発するのに役立ちます。この記事では、Vue-cli のインストールと使い方、およびプロジェクト構造、環境変数設定、Vuex などの基本的なプロジェクト構成を紹介します。この記事が、Vue-cli をより適切に使用し、より優れた Web アプリケーションを開発するのに役立つことを願っています。

以上がVue-cli スキャフォールディング ツールの使用法とプロジェクト構成の手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。