如何在不用Vue CLI的情況下開發Vue.js應用程式

近年來，Vue.js作為一種非常受歡迎的JavaScript函式庫，被廣泛應用於開發單頁應用程式(SPA)。 Vue.js的優勢在於其簡約的API、易用性以及靈活的選項。然而，要使用Vue.js建構一個SPA，Vue CLI似乎成為了不可或缺的選擇。但實際上，我們並不必然要使用Vue CLI進行開發。在本文中，我將介紹如何在不用Vue CLI的情況下開發Vue.js應用程式。

一、前置條件

在使用Vue.js建立應用程式之前，您應該可以掌握以下內容：

1. HTML，CSS，JavaScript基礎知識。
2. Vue.js 基礎。

二、開始開發

1. 引用Vue.js

在您的應用程式中，您可以使用CDN引用Vue.js ，也可以下載Vue.js，然後在HTML中引用它：

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

2. 建立Vue實例

要使用Vue.js，首先需要建立一個Vue實例。在這個例子中，我們將建立一個示範用的「hello-world」應用程式。

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

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

（1）el

「el」選項是必要的，用於指定Vue實例將要掛載的HTML元素。

（2）data

「data」選項是可選的，用於指定Vue實例的初始資料。

3. 計算屬性

在Vue.js中，計算屬性(computed properties)是一種程式碼解決方案，用於聲明在其他資料基礎上計算結果的屬性。計算屬性的優點在於它們可以在其依賴的資料變更時自動更新。下面是一個使用計算屬性的範例。

<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. 監聽器

在Vue.js中，您可以使用監聽器(watchers)來監視特定的屬性，並在其值改變時執行一些任務。下面是一個使用監聽器的例子。

<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>

在這個例子中，我們建立了一個計數器，並當它的值改變時，透過watcher將其印到控制台上。

5. 元件

元件是Vue.js中最重要的概念之一，它允許使用者將頁面分割成更小的可重複使用部分，並且讓程式碼更易於組織和維護。在Vue.js中，元件透過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>

在這個例子中，我們建立了一個名為「todo-item」的元件，然後在Vue實例中將其註冊，並在模板中使用。

三、總結

在本文中，我們介紹了在不使用Vue CLI的情況下，如何使用Vue.js建立一個SPA。為了達到這個目的，我們需要具備以下知識點：HTML，CSS，JavaScript基礎知識和Vue.js基礎知識。接著，我們創建了一個「hello-world」應用程序，使用計算屬性、監聽器進行開發，並且使用元件將應用程式劃分為更小的可重複使用部分。雖然Vue CLI是一個非常方便的工具，但是Vue.js本身就足夠靈活和易用，我們完全可以不必使用Vue CLI來開發SPA。

以上是如何在不用Vue CLI的情況下開發Vue.js應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！