Penjelasan terperinci tentang cara menyusun vue tanpa menggunakan webpack

Dalam proses menggunakan vue.js, anda sering melihat beberapa operasi yang memerlukan pembungkusan dan penyusunan webpack, menjadikan vue.js lebih mudah untuk diperkenalkan dan digunakan. Walau bagaimanapun, bagi sesetengah pembangun, mereka lebih suka menggunakan vue.js secara langsung tanpa menghabiskan terlalu banyak usaha untuk pembungkusan dan penyusunan. Jadi bolehkah syarat ini diluluskan? Jawapannya ya.

1. Memperkenalkan vue.js

Tanpa menyusun dengan webpack, kami perlu memperkenalkan vue.js secara intuitif ke dalam projek kami. Ini boleh diperkenalkan melalui CDN Kami boleh menambah kod berikut secara langsung dalam html:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

Perlu diambil perhatian bahawa anda perlu menukar laluan pengenalan mengikut keperluan projek anda dan versi vue.js Nombor versi dalam .

Kemudian anda boleh mula menggunakan vue.js dengan senang hati.

2. Penggunaan komponen

Apabila menggunakan vue.js, kami boleh membahagikan projek kepada berbilang bahagian boleh guna semula dengan menentukan komponen. Kami juga boleh menggunakan komponen tanpa menyusun dengan webpack.

Kami boleh mentakrif dan memperkenalkan komponen secara langsung dalam fail html, contohnya:

<my-component></my-component>

<script>
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})
</script>

Pada masa ini, kami telah mentakrifkan komponen bernama my-component dan meneruskannya melalui Vue.component Daftarkannya. Dalam fail html, kita boleh menggunakan komponen ini secara langsung.

Ringkasnya, komponen global boleh didaftarkan dan digunakan dalam fail html.

3. Fail komponen tunggal

Walaupun kita boleh mentakrifkan terus komponen dalam fail html tanpa menyusun dengan webpack, apabila projek menjadi lebih kompleks, bilangan komponen menjadi Terlalu kerap, pendekatan ini tidak kondusif untuk penyelenggaraan dan penggunaan semula. Pada masa ini, kita boleh menulis setiap komponen secara berasingan dalam fail vue dan memperkenalkan komponen melalui teg <script>.

Sebagai contoh, fail komponen bernama hello-world.vue:

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

Kemudian, kami boleh memperkenalkan dan menggunakan komponen ini dengan cara berikut:

  


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>


<script>
new Vue({
  el: '#app'
})

Anda boleh menggunakan komponen ini dengan gembira.

4. Gaya CSS

Jika anda menghadapi masalah penggayaan apabila menggunakan fail komponen tunggal, hanya gunakan teg <style> tradisional untuk menambah gaya.

Sebagai contoh, dalam komponen hello-world.vue, kita boleh menambah gaya berikut:

<style>
div {
  color: green;
}
</style>

Ringkasnya, walaupun dalam banyak tutorial, penggunaan webpack akan terlibat semasa memperkenalkan penggunaan vue.js , tetapi untuk pembangun, anda boleh dengan senang hati menggunakan vue.js tanpa menggunakan webpack.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menyusun vue tanpa menggunakan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!