vuejs适合写什么项目_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实战教程

该教程介绍了数据双向绑定、vuejs的部分指令等，并通过简单的实例开发带你了解并会使用Vuejs，非常适合有一定html和js经验的小伙伴。

image.png

该项目使用 Vue.js 和 vue-router 创建单页应用，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。

效果图：

image

该项目使用Vue.js实现一个简易的富文本编辑器应用。通过项目的实战学习，获得以下技能：Vue.js框架进阶学习，数据绑定操作，组件式开发。与其他Vue项目不同，这是一个纯前端的项目，主要学习Vue框架的使用与原生Js编写，同时了解DOM的相关知识。

其中：

资源打包工具的了解与使用，以webpack讲解为主。

Vuex的使用，让你了解全局状态管理的作用与优势，并学习掌握。

Range/Selection的讲解与实践，带你深入探索富文本编辑器背后的原理。

image.png

效果图：

image.png

该项目使用 Vue.js+Koa.js+MongoDB 实现一个类似于“什么值得买”的网站，实现的功能模块主要有：用户管理、商品分类管理、商品标签管理、商品管理等。

其中：

前端页面使用 Vue.js 实现，主要学习 Vue.js 技术栈的使用，主要使用 vue+vue-router+vuex 等技术。

服务器端使用 Node.js 实现的一个 web 框架 Koa.js，主要学习基于 Koa.js 的 Web 开发。

同时使用 MongoDB 做数据存储。

image.png

该项目使用 Python 的 Flask 框架和 VueJS，通过两个实战项目留言板项目和论坛应用的练习，让大家掌握 Flask + VueJS 进行 Web 开发的能力。

项目一：留言板项目

主要是为带大家熟悉 Web 开发以及 VueJS 中的一些基本概念，同时也锻炼大家的编码能力。不要觉得留言板是个简单的项目，当然，它可以做的很简单，比如只有表单的提交和反显，它也可以做的很复杂，甚至可以作为一个创业项目，比如国内的多说和国外的Disqus。

项目二：论坛应用

论坛项目是基于 flask，vue，vue-router，vuex，axios 的等实现的一个较为综合的 SPA 应用，实现了包括用户注册与登录，markdown 编辑与预览，发布帖子，评论帖子，帖子话题筛选，瀑布流加载等功能。

最后

如果你想要学习更多前端开发，上实验楼，前端教程+在线开发环境等你来学；

你也可以点击【WEB前端工程师】学习路径，跟着路径零基础入门前端开发；