近年来，vue.js作为一种非常受欢迎的javascript库，被广泛应用于开发单页应用程序(spa)。vue.js的优势在于其简约的api、易用性以及灵活的选项。然而，要使用vue.js构建一个spa，vue cli似乎成为了不可或缺的选择。但实际上，我们并不必然要使用vue cli进行开发。在本文中，我将介绍如何在不用vue cli的情况下开发vue.js应用程序。
一、前置条件
在使用Vue.js构建应用程序之前，您应该能够掌握以下内容：
- HTML，CSS，JavaScript基础知识。
- Vue.js 基础知识。
二、开始开发
- 引用Vue.js
在您的应用程序中，您可以使用CDN引用Vue.js，也可以下载Vue.js，然后在HTML中引用它：
立即学习“前端免费学习笔记（深入）”；
<script src="https://unpkg.com/vue"></script>
- 创建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实例的初始数据。
- 计算属性
在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。
