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

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

WBOY

リリース： 2023-06-09 16:05:08

オリジナル

879 人が閲覧しました

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. 基本的なプロジェクト構成

プロジェクト構造

build: プロジェクトの構築とパッケージング関連の構成フォルダー
config: プロジェクト構成フォルダー
node_modules: プロジェクトの依存関係パッケージフォルダー
src: プロジェクトコードフォルダー (コンポーネント、テンプレート、静的リソースなどを含む)
static: 画像、フォントなどのプロジェクトの静的リソースフォルダー。

プロジェクトには、開発環境など、さまざまな環境変数を設定できます。テスト環境と本番環境。 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 は、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 サイトの他の関連記事を参照してください。