Bagaimana untuk memperkenalkan cdn ke dalam vue

Vue ialah rangka kerja JavaScript popular yang memudahkan pembangun menulis aplikasi web berskala. Apabila menggunakan Vue, kami boleh memilih untuk memperkenalkan Vue ke dalam projek kami sebagai fail JavaScript, atau memperkenalkan Vue daripada perkhidmatan CDN (Content Delivery Network).

Jadi, bagaimana untuk memperkenalkan CDN Vue? Seterusnya, kami akan memperkenalkan secara terperinci langkah-langkah untuk memperkenalkan Vue menggunakan CDN.

1. Tambahkan pautan CDN dalam fail HTML

Pertama, kami perlu memperkenalkan pautan CDN Vue dalam fail HTML. Kami boleh mencari pautan CDN Vue di tapak web rasmi Vue, seperti berikut:

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

Tambahkan pautan di atas pada bahagian kepala atau badan fail HTML, dan letakkannya dalam pengenalan fail lain yang diperlukan sebelum ini.

2. Buat contoh Vue

Selepas memperkenalkan CDN Vue, kami perlu mencipta tika Vue. Kita boleh mencipta tika Vue sama seperti memperkenalkan fail JS, seperti yang ditunjukkan di bawah:

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

Selepas memperkenalkan CDN Vue, kita boleh menggunakan Vue untuk mencipta tika Vue. Dalam kod di atas, kami mencipta apl bernama contoh Vue, mengikatnya pada elemen dengan apl id dalam halaman HTML dan mentakrifkan mesej atribut dalam data.

3. Menggunakan Contoh Vue dalam HTML

Setelah kami mencipta tika Vue, kami boleh menggunakan Vue untuk mengikat data dalam fail HTML. Sebagai contoh, kami boleh menggunakan pendakap kerinting berganda untuk mengikat data tika Vue seperti berikut:

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

Dalam kod di atas, kami mengikat apl tika Vue pada elemen dengan apl id dalam HTML page , dan gunakan pendakap kerinting berganda untuk mengikat mesej data dalam tika Vue.

4. Memperkenalkan komponen Vue lain CDN

Selain CDN Vue sendiri, kami juga boleh menggunakan CDN untuk memperkenalkan komponen dan pemalam Vue lain, seperti Vue-router dan Vuex. Sebelum menggunakan komponen dan pemalam ini, kami perlu memperkenalkan pautan CDN mereka dalam fail HTML. Sebagai contoh, kita boleh menggunakan pautan berikut untuk memperkenalkan CDN Vue-router:

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

Begitu juga, kita perlu menambah pautan CDN Vue-router dalam dokumen HTML sebelum mencipta contoh Vue-router. Kita boleh menggunakan kaedah createRouter() untuk mencipta contoh Vue-router. Sebagai contoh, kod berikut menggunakan Vue-router untuk melaksanakan tetapan penghalaan asas:

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

Dalam kod di atas, kami mentakrifkan dua laluan melalui atribut laluan: / dan /about. Kemudian, kami menggunakan kaedah Vue.createApp() untuk mencipta tika Vue dan menggunakan pemalam Vue-router dan kaedah mount() untuk mengikat tika Vue pada elemen aplikasi halaman HTML.

Ringkasan

Memperkenalkan CDN Vue ialah cara yang sangat mudah dan pantas yang membolehkan kami membina aplikasi Vue dengan lebih mudah. Kami hanya perlu menambah pautan CDN dalam fail HTML, mencipta contoh Vue, dan kemudian mengikatnya pada halaman HTML. Selain itu, kami juga boleh menggunakan pautan CDN untuk membawa masuk komponen dan pemalam Vue lain, seperti Vue-router dan Vuex, untuk memudahkan membina aplikasi berasaskan Vue.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan cdn ke dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!