vue.js构建单页面应用以及使用vue-cli构建项目

一、项目中引入vue.js

进入vue.js的官网：https://cn.vuejs.org/v2/guide/installation.html，点击开发版本

浏览器中会显示vue.js的源码，将这个源码拷贝保存下来，大小为283KB左右，项目中将引入这个vue.js文件。

二、案例一：基本的vue实例

	
	
	
 

	

		
{{msg}}
	
	

三、案例二：属性绑定和双向数据绑定

	
	
	


	

		
hello world
		
		
{{content}}
	
	
	

四、计算属性与监听器

	
	
	


	

		姓：
		名：
		
{{fullName}}
		
{{count}}
	

	

五、v-if,v-show,v-for指令

	
	
	


	

		
v-if
		
v-show
		

			
{{item}}
		
		toggle
	

	

六、构建一个todoList

	
	
	


	

		

			
			提交
		
		

			

				{{item}}
			
		
	

	

七、父组件向子组件通信

父组件为子组件设置属性，子组件中接收这些属性的值

	
	
	


	

		

			
			提交
		
		

			
			
		
	

	

八、子组件向父组件通信

通过“子组件发布，父组件订阅”这种模式，实现子组件向父组件进行通信

	
	
	


	

		

			
			提交
		
		

			
			
			
		
	

	

完整的项目代码，放在我的github地址：https://github.com/script2fame/MyVue_Noob

九、使用vue-cli构建项目

在大型的项目构建过程中，我们一般不会在单页面中编写vue.js文件，而是使用vue-cli这个工具来构建一个vue.js的基本架构。

什么是vue-cli呢？

根据vue.js官网的介绍，Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。简而言之，vue-cli是一个脚手架，能够快速构建一个繁杂的vue.js项目。

我使用vue-cli脚手架重新构建了之前的单页面todoList，项目源代码的存放地址在我的github上：https://github.com/script2fame/MyVue