フロントエンドプロジェクトのビューを構築する方法

フロントエンドとバックエンドの分離の傾向がますます明らかになるにつれて、フロントエンド フレームワークはますます増えています。その中でもVue.jsは比較的シンプルで使いやすいフレームワークであり、多くのフロントエンドエンジニアに歓迎されています。この記事では、Vue.jsを使ったフロントエンドプロジェクトの構築方法を紹介します。

1. プロジェクトの作成

Vue CLI を使用して、Vue プロジェクトをすばやく作成します。 Vue CLI は、Vue.js プロジェクト構造を迅速に構築するのに役立つコマンド ライン ツールです。次のコマンドを実行して、新しい Vue プロジェクトを作成できます:

vue create my-project

次に、オプションに従ってプロジェクトを構成します。その中で、導入する必要があるプラグインと関連構成を選択する必要があります。たとえば、ルーター (vue-router)、vuex (状態マネージャー)、CSS プリプロセッサなど、どのプラグインをインストールする必要があるかを尋ねられます。構成が完了すると、Vue CLI は選択に基づいてプロジェクト構造を自動的に作成します。

2. コンポーネントの作成

Vue.js の中心的な考え方はコンポーネント化の考え方であり、すべてがコンポーネント化されています。したがって、Vue プロジェクトを構築するためのコンポーネントを作成する必要があります。コンポーネントは再利用可能なコード ブロックであるため、コードの冗長性が大幅に削減され、コードの再利用性が向上します。

/src/components フォルダーの下にコンポーネントを作成できます。たとえば、HelloWorld.vue コンポーネントを作成します。

<template>
  <div>
    <p>{{msg}}</p>
    <input v-model="text">
    <p>{{text}}</p>
    <button @click="onClick">点击</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'hello world',
        text: ''
      }
    },
    methods: {
      onClick() {
        alert('clicked')
      }
    }
  }
</script>

これは非常に単純な Vue.js コンポーネントです。テンプレートは、補間式、命令などを含むテンプレート構文を使用し、対応する JavaScript コードも含みます。

3. コンポーネントの使用

端的に言えば、コンポーネントは Vue インスタンスであり、この Vue インスタンスは他の Vue インスタンスのテンプレートで「使用」できます。 Vue では、<template> タグを通じてこのコンポーネントを使用できます。

作成したばかりの HelloWorld コンポーネントは、App.vue に導入できます。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>

上記のコードでは、最初にコンポーネントを導入し、このコンポーネントをテンプレートで使用する必要があります。

4. Vuex 状態管理

Vuex は、Vue.js アプリケーションの状態 (データ) を管理するために特別に使用されるライブラリです。より複雑なプロジェクトでは、状態が多すぎると管理が非常に面倒になります。 Vuex を使用して状態を管理すると、この状態をより適切に維持し、異なるコンポーネント間で共有できるようになります。

プロジェクトに Vuex をインストールする必要があります:

npm install vuex --save

次に store.js ファイルを作成します:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

これは単純な Vuex ストア ( state）には、それぞれデータの保存、データの変更、非同期操作、データの取得などの操作に対応する状態（状態）、ミューテーション、アクション、およびゲッターが含まれます。

store.js ファイルを作成した後、それを Vue インスタンスに挿入する必要があります:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

この時点で、コンポーネント ステータスで Vuex にアクセスできます。 。

5. ルーティングの使用

Vue.js では、vue-router を使用してルーティングを管理できます。

/src/router フォルダーに index.js ファイルを作成して、ルーティング管理を実装できます。

プロジェクトに vue-router をインストールする必要があります:

npm install vue-router --save

次にルートを書き込みます:

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

次に、上記のルートを Vue インスタンスに導入します:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

このようにして、プロジェクト内でルーティングを使用できます。

6. 概要

この記事では、Vue.js を使用してフロントエンド プロジェクトを迅速に構築する方法を紹介します。プロジェクト構造の作成、コンポーネントの作成、Vuex を使用したステータスの管理、vue-router を使用した Vue CLI を介したルーティングの管理などの手順は、初心者にプロジェクトを構築するための比較的明確なプロセスを提供します。もちろん、これは Vue.js の入門にすぎず、実際のプロジェクト開発では、習得しなければならない知識やスキルがまだまだたくさんあります。この記事が Vue.js を始めるのに役立ち、また Vue.js をより深く理解するのに役立つことを願っています。

以上がフロントエンドプロジェクトのビューを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。