Vue+Webpack+Node.js的全栈项目简介

Vue

Vue.js是一款极简的MVVM框架，如果让我用一个词来形容它，就是“轻巧”。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。为什么这么说，因为Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js却一直受到一定程度的关注，而其本身也在高速发展中，不论是生态、社区、资源、插件等等都在日趋壮大。

 

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。什么是状态管理模式？在开发应用程序时，会分解出很多组件进行开发，而各个组件之间想必在逻辑上多少是有关系的。那么组件之间的“通信”就成了待解决问题。以前我们试图用事件广播来做，但随之而来的问题是，在应用不断的扩展和变化中，事件变得越来越复杂，以至于越来越难调试，越来越难追踪错误。显示这样并不利于维护和拓展，于是状态管理模式冒了出来。如果您的应用程序足够简单，建议您不要使用Vuex。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

 

Vue Router

Vue Router 是Vue.js官方的路由插件，它和Vue.js是深度集成的，适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在Vue Router单页面应用中，则是路径之间的切换，也就是组件的切换。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

 

Vue CLI

Vue的脚手架，帮助开发者快速的构建Vue工程。关于如何搭建 / 升级 vue-cil 可以看我的另一篇文章《Vue开发环境搭建全过程》

 

Webpack

webpack的主要用途：把所有浏览器端需要发布的资源做相应的准备，完成资源的合并和打包。四个核心概念：

• 入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
• 输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
• loader：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
• 插件(plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

 

Node.js

在服务器端，JavaScript不依赖浏览器，而是由特定的运行环境提供的JavaScript引擎解析执行，比如Node.js。服务器端的JavaScript不操作DOM和BOM，它常常用来做一些在客户端做不到的事情，例如操作数据库、操作文件等。另外，在客户端的Ajax操作只能发送请求，而接收请求和做出响应的操作就需要服务器端的JavaScript来完成。

 

Koa2

Koa2是现在最流行的基于Node.js平台的web开发框架，它很小，但扩展性很强。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。一个Koa应用就是一个对象，包含了一个middleware数组，这个数组由一组Generator函数组成。这些函数负责对HTTP请求进行各种加工，比如生成缓存、指定代理、请求重定向等等。这些中间件函数基于 request 请求以一个类似于栈的结构组成并依次执行。

 

MongoDB

MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。MongoDB最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

我们可以在Koa2中通过Mongoose对MongoDB进行便捷的对象模型操作。