近年來，Vue.js作為一種非常受歡迎的JavaScript函式庫，被廣泛應用於開發單頁應用程式(SPA)。 Vue.js的優勢在於其簡約的API、易用性以及靈活的選項。然而，要使用Vue.js建構一個SPA，Vue CLI似乎成為了不可或缺的選擇。但實際上，我們並不必然要使用Vue CLI進行開發。在本文中，我將介紹如何在不用Vue CLI的情況下開發Vue.js應用程式。
一、前置條件
在使用Vue.js建立應用程式之前，您應該可以掌握以下內容：
二、開始開發
在您的應用程式中，您可以使用CDN引用Vue.js ，也可以下載Vue.js，然後在HTML中引用它：
<script src="https://unpkg.com/vue"></script>
要使用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實例的初始資料。
在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>在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將其印到控制台上。
元件是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中文網其他相關文章！
