Bagaimana untuk membangunkan aplikasi Vue.js tanpa Vue CLI

Dalam beberapa tahun kebelakangan ini, Vue.js, sebagai perpustakaan JavaScript yang sangat popular, telah digunakan secara meluas untuk membangunkan aplikasi satu halaman (SPA). Kelebihan Vue.js ialah APInya yang ringkas, kemudahan penggunaan dan pilihan yang fleksibel. Walau bagaimanapun, untuk membina SPA menggunakan Vue.js, Vue CLI nampaknya telah menjadi pilihan yang sangat diperlukan. Tetapi sebenarnya, kita tidak semestinya perlu menggunakan Vue CLI untuk pembangunan. Dalam artikel ini, saya akan memperkenalkan cara membangunkan aplikasi Vue.js tanpa Vue CLI.

1. Prasyarat

Sebelum membina aplikasi dengan Vue.js, anda seharusnya dapat menguasai perkara berikut:

1. Asas HTML, CSS, JavaScript .
2. Asas Vue.js.

2. Mulakan pembangunan

1. Rujukan Vue.js

Dalam aplikasi anda, anda boleh menggunakan CDN untuk merujuk Vue.js , anda juga boleh memuat turun Vue.js dan merujuknya dalam HTML:

<script src="https://unpkg.com/vue"></script>

2. Cipta contoh Vue

Untuk menggunakan Vue.js, anda perlu mencipta Vue terlebih dahulu Contoh. Dalam contoh ini, kami akan mencipta aplikasi "hello-world" demonstrasi.

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

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

(1)el

Pilihan "el" diperlukan dan digunakan untuk menentukan elemen HTML yang tika Vue akan dipasang.

(2) data

Pilihan "data" adalah pilihan dan digunakan untuk menentukan data awal tika Vue.

3. Sifat terkira

Dalam Vue.js, sifat terkira ialah penyelesaian kod untuk mengisytiharkan hasil yang dikira berdasarkan data lain. Kelebihan sifat yang dikira ialah mereka mengemas kini secara automatik apabila data yang mereka bergantung pada berubah. Di bawah ialah contoh menggunakan sifat yang dikira.

<div id="app">
  <p>{{ fullName }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

4. Pendengar

Dalam Vue.js, anda boleh menggunakan pemerhati untuk memantau sifat tertentu dan apabila nilainya berubah melaksanakan beberapa tugas. Di bawah adalah contoh menggunakan pendengar.

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment()">Increment</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment: function () {
        this.count++
      }
    },
    watch: {
      count: function (value) {
        console.log(value)
      }
    }
  })
</script>

Dalam contoh ini, kami mencipta pembilang dan mencetaknya ke konsol melalui pemerhati apabila nilainya berubah.

5. Komponen

Komponen ialah salah satu konsep yang paling penting dalam Vue.js, yang membolehkan pengguna membahagikan halaman kepada bahagian yang lebih kecil yang boleh digunakan semula dan membiarkan kod lebih mudah untuk disusun dan mengekalkan. Dalam Vue.js, komponen dicipta melalui kaedah Vue.extend().

<div id="app">
  <todo-item></todo-item>
</div>

<script>
  var todoItem = Vue.extend({
    template: '<p>Learn Vue.js</p>'
  })

  new Vue({
    el: '#app',
    components: {
      'todo-item': todoItem
    }
  })
</script>

Dalam contoh ini, kami mencipta komponen yang dipanggil "todo-item", kemudian mendaftarkannya dalam contoh Vue dan menggunakannya dalam templat.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan Vue.js untuk mencipta SPA tanpa menggunakan Vue CLI. Untuk mencapai matlamat ini, kita perlu mempunyai mata pengetahuan berikut: HTML, CSS, asas JavaScript dan asas Vue.js. Seterusnya, kami mencipta aplikasi "hello-world", membangunkannya menggunakan sifat yang dikira, pendengar dan komponen yang digunakan untuk membahagikan aplikasi itu kepada bahagian yang boleh digunakan semula yang lebih kecil. Walaupun Vue CLI adalah alat yang sangat mudah, Vue.js sendiri adalah fleksibel dan mudah digunakan. Kami tidak perlu menggunakan Vue CLI untuk membangunkan SPA.

Atas ialah kandungan terperinci Bagaimana untuk membangunkan aplikasi Vue.js tanpa Vue CLI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!