一、前置条件
在使用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。
以上就是如何在不用vue cli的情况下开发vue.js应用程序的详细内容。