Vueにcdnを導入する方法

Vue は、開発者がスケーラブルな Web アプリケーションを簡単に作成できるようにする人気の JavaScript フレームワークです。 Vue を使用する場合、Vue を JavaScript ファイルとしてプロジェクトに導入するか、CDN (コンテンツ配信ネットワーク) サービスから Vue を導入するかを選択できます。

それでは、Vue の CDN を導入するにはどうすればよいでしょうか?次にCDNを利用してVueを導入する手順を詳しく紹介します。

1. HTML ファイルに CDN リンクを追加

まず、HTML ファイルに Vue の CDN リンクを導入する必要があります。以下に示すように、Vue の CDN リンクは Vue の公式 Web サイトで見つけることができます:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

上記のリンクを HTML ファイルの先頭または本文の部分に追加し、他の必要なファイルの導入の前に配置できます。

2. Vue インスタンスの作成

Vue の CDN を導入した後、Vue インスタンスを作成する必要があります。以下に示すように、JS ファイルを導入するのと同じように Vue インスタンスを作成できます。

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Vue の CDN を導入した後、Vue を使用して Vue インスタンスを作成できます。上記のコードでは、app という名前の Vue インスタンスを作成し、それを HTML ページ内の ID app を持つ要素にバインドし、データ内に属性メッセージを定義します。

3. HTML での Vue インスタンスの使用

Vue インスタンスを作成したら、Vue を使用して HTML ファイル内のデータをバインドできます。たとえば、次のように二重中括弧を使用して Vue インスタンスのデータをバインドできます:

<div id="app">
  {{ message }}
</div>

上記のコードでは、HTML ページ内の app という ID を持つ要素に Vue インスタンス アプリをバインドします。二重中括弧を使用して、Vue インスタンス内のデータ メッセージをバインドします。

4. 他の Vue コンポーネント CDN の紹介

Vue 独自の CDN に加えて、CDN を使用して、Vue-router などの他の Vue コンポーネントやプラグインを導入することもできます。そしてビュークス。これらのコンポーネントとプラグインを使用する前に、HTML ファイルに CDN リンクを導入する必要があります。たとえば、次のリンクを使用して Vue-router の CDN を導入できます:

<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>

同様に、HTML ドキュメントに Vue-router の CDN リンクを追加して、Vue-router インスタンスを作成する必要があります。 。 createRouter() メソッドを使用して Vue-router インスタンスを作成できます。たとえば、次のコードでは Vue-router を使用して基本的なルーティング設定を実装しています。

<script>
  const router = VueRouter.createRouter({
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })
  const app = Vue.createApp({})
  app.use(router)
  app.mount('#app')
</script>

上記のコードでは、routes 属性を通じて 2 つのルート、/ と /about を定義しています。次に、Vue.createApp() メソッドを使用して Vue インスタンスを作成し、Vue-router プラグインと mount() メソッドを使用して Vue インスタンスを HTML ページの app 要素にバインドします。

概要

Vue の CDN を導入することは、Vue アプリケーションをより便利に構築できるようにする非常にシンプルかつ迅速な方法です。 HTML ファイルに CDN リンクを追加し、Vue インスタンスを作成して、それを HTML ページにバインドするだけです。さらに、CDN リンクを使用して、Vue-router や Vuex などの他の Vue コンポーネントやプラグインを取り込み、Vue ベースのアプリケーションの構築を容易にすることもできます。

以上がVueにcdnを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。