Vue アプレットの中心的な概念について話しましょう

近年、モバイル インターネットの人気とミニ プログラムの台頭により、ますます多くの企業がミニ プログラムの開発に投資し始めています。小規模プログラムの開発において、Vue.js は軽量のフロントエンド フレームワークとして、その柔軟性と学習の容易さで広く知られています。この記事では、開発者が Vue アプレットの中心的な概念をよりよく理解できるように、Vue アプレットの設定を紹介します。

1. プロジェクトの初期化

始める前に、Vue CLI 3 をインストールする必要があります。これは、Vue プロジェクトを迅速に作成するために Vue.js によって公式に提供されるスキャフォールディング ツールです。ターミナルに次のコマンドを入力してインストールします:

npm install -g @vue/cli

インストール後、Vue CLI 3 を介して Vue アプレットを作成できます。

1. プロジェクトの作成

ターミナルに次のコマンドを入力して、新しい Vue アプレット プロジェクトを作成します:

vue create my-miniapp

上記のコマンドを入力した後、次のことが必要です。 Babel、Router、Vuex、CSS プリプロセッサなど、プロジェクトに必要な現在の機能を選択します。ここではデフォルトの機能を選択し、Enter キーを押します。

2. プロジェクトを開始します

プロジェクトのルート ディレクトリで次のコマンドを実行します。

npm run serve

プロジェクトを開始した後、 をブラウザ http://localhost:8080 を使用して、Vue アプレットのホームページにアクセスします。

2. ディレクトリ構造

上記の手順により、Vue アプレットが正常に作成されました。したがって、次に、Vue アプレット プロジェクトのディレクトリ構造を理解する必要があります。

##├·ックス - アウトを使用してパブリックアウト ’’ ’' 'out's' out's 'out' of to ‐ ‐ ‐ ‐ greas＃src ##│s──store// vuexのストアファイルディレクトリ
│ § ─ ─ ビュー // ページ ファイル ディレクトリ
│ § ─ ─ App.Vue // アプリ入口ファイル

│ ─ ─ Main ─ Main .js // プロジェクト エントリ ファイル

§── .browserslistrc // ブラウザ互換性設定ファイル
-------------- babel.config.js // Babel 設定ファイル
§── package. json // プロジェクト設定ファイル
└── README.md //プロジェクト説明ファイル

3. 中心概念

プロジェクトのディレクトリ構造を理解したら、次に、Vue アプレットの中心概念をいくつか学ぶ必要があります。

コンポーネント

Vue アプレットのコンポーネントは非常に重要な概念であると言えます。ページを機能的に独立したいくつかのコンポーネントに分割し、コードをより簡潔にします。そしてメンテナンスが容易になります。 Vue アプレットでは、各コンポーネントは Vue インスタンスで構成され、Vue インスタンスには複数のコンポーネントを含めることができます。

src/components

ディレクトリに新しいコンポーネントを作成できます (例:
1. src/components/HelloWorld.vue
)。このコンポーネントには、単純な

template

および

script

を含めることができます。 <pre class="brush:php;toolbar:false">&lt;template&gt;   &lt;div&gt;{{ msg }}&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default {   data() {     return {       msg: 'Hello, World!'     }   } } &lt;/script&gt;</pre>このコンポーネントの template には、「Hello, World!」と表示される単純なテキスト ボックスが含まれています。 " コンテンツ。このコンポーネントの script は、data 属性、つまり

msg

を定義し、そのデフォルト値を「Hello, World!」に設定します。 コンポーネントをページに導入するには、ターゲットの template タグで <hello-world></hello-world> を使用できます。ページ構文を使用して、作成したばかりのコンポーネントを紹介します。

ルーティング

Vue アプレットでは、ルーティングを導入することで、ページにジャンプ機能を持たせることができます。 Vue アプレットには Vue Router プラグインが組み込まれており、ルーティング設定が非常に簡単になります。

src/router

ディレクトリに新しいルーティング ファイルを作成します (例:
2. src/router/index.js
)。ルーティング ファイルには、単純なルーティング設定が含まれています。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

上記のルーティング設定では、2 つのルーティング ノードを設定します。1 つは

/

(つまり、アプリケーションのホームページ)、もう 1 つは / です。その他 1 つは /約 です。各ルーティング ノードは、

path

属性、name 属性、および component 属性を設定する必要があります。このうち、path 属性はルートの URL アドレスを表し、name 属性はルートの名前、component 属性はルートの名前を表します。ルートに対応するコンポーネント。さらに、ルーティングジャンプ方法も設定できます。上記のルーティング設定では、mode: 'history' を使用して HTML5 履歴モードを有効にしました。 <p>在 <code>src/views 目录下可以创建与 router 配套的视图文件，例如： src/views/Home.vue 和 src/views/About.vue 。这两个文件分别对应上面路由设置的首页和关于页面。

3. Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。状态共享是指多个组件共享同一个状态，这种设计模式使得在全局上管理应用程序的状态非常容易，从而提高代码的可维护性和代码的复用性。

在 src/store 目录下可以创建一个新的Vuex store文件，例如： `src/store/index.js'。该文件中包含一些基本的Vuex state 属性、Vuex mutations 和 Vuex actions 。

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

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

上述代码包含以下三个关键的属性：

• state：表示组件中的数据状态。
• mutations：表示一些方法，用于改变 state 中的状态。
• actions：表示一些异步方法，用于执行复杂的逻辑代码。

在代码中，我们定义了一个 count 状态，并在 mutations 中定义了一个 increment 函数和一个 decrement 函数，用于改变 count的值。我们还在 actions 中实现了操作 mutations 中函数的方法，分别是 increment 和 decrement。

四、总结

本文介绍了Vue小程序的设置，包括了项目的初始化，目录结构，以及Vue小程序的核心概念：组件、路由和Vuex。

在实际的开发中，使用Vue小程序可以显著提高开发效率，简化代码结构。希望通过本文的介绍，读者可以更好地了解Vue小程序的使用和相关知识，并在实际的开发中起到指导作用。

以上がVue アプレットの中心的な概念について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。