5个Vue.js项目实战教程
什么是Vue.js？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue.js 采用自底向上增量开发的设计。Vue.js 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue.js 完全有能力驱动采用单文件组件和 Vue.js 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做,Vuejs在实现相同功能的时候更简单.
实验楼上有Vue.js的相关教程，不但有详细的开发文档，还有在线开发环境发，非常适合动手学习Vue.js，这里整理了5个相关教程，如果感兴趣点击教程即可跟着动手操作学习哦。
image.png
Vue.js实战教程
基础入门教程：【Vuejs2.0 使用教程】
该教程介绍了数据双向绑定、vuejs的部分指令等，并通过简单的实例开发带你了解并会使用Vuejs，非常适合有一定html和js经验的小伙伴。
image.png
实战项目一：【用Vue.js 和 vue-router 创建单页导航和分页 】
该项目使用 Vue.js 和 vue-router 创建单页应用，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。
效果图：
image
实战项目二：【Vue.js 实现富文本编辑器】
该项目使用Vue.js实现一个简易的富文本编辑器应用。通过项目的实战学习，获得以下技能：Vue.js框架进阶学习，数据绑定操作，组件式开发。与其他Vue项目不同，这是一个纯前端的项目，主要学习Vue框架的使用与原生Js编写，同时了解DOM的相关知识。
其中：
- 资源打包工具的了解与使用，以webpack讲解为主。
- Vuex的使用，让你了解全局状态管理的作用与优势，并学习掌握。
- Range/Selection的讲解与实践，带你深入探索富文本编辑器背后的原理。
image.png
效果图：
image.png
实战项目三：【Vue.js+Koa.js+MongoDB打造“什么值得买”网站】
该项目使用 Vue.js+Koa.js+MongoDB 实现一个类似于“什么值得买”的网站，实现的功能模块主要有：用户管理、商品分类管理、商品标签管理、商品管理等。
其中：
- 前端页面使用 Vue.js 实现，主要学习 Vue.js 技术栈的使用，主要使用 vue+vue-router+vuex 等技术。
- 服务器端使用 Node.js 实现的一个 web 框架 Koa.js，主要学习基于 Koa.js 的 Web 开发。
- 同时使用 MongoDB 做数据存储。
image.png
实战项目四：【Flask + VueJS 全栈 Web 开发实战】
该项目使用 Python 的 Flask 框架和 VueJS，通过两个实战项目留言板项目和论坛应用的练习，让大家掌握 Flask + VueJS 进行 Web 开发的能力。
项目一：留言板项目
主要是为带大家熟悉 Web 开发以及 VueJS 中的一些基本概念，同时也锻炼大家的编码能力。不要觉得留言板是个简单的项目，当然，它可以做的很简单，比如只有表单的提交和反显，它也可以做的很复杂，甚至可以作为一个创业项目，比如国内的多说和国外的Disqus。
项目二：论坛应用
论坛项目是基于 flask，vue，vue-router，vuex，axios 的等实现的一个较为综合的 SPA 应用，实现了包括用户注册与登录，markdown 编辑与预览，发布帖子，评论帖子，帖子话题筛选，瀑布流加载等功能。
最后
- 如果你想要学习更多前端开发，上实验楼，前端教程+在线开发环境等你来学；
- 你也可以点击【WEB前端工程师】学习路径，跟着路径零基础入门前端开发；
