Vue-cli + express 构建的SPA Blog（采用先后端分离方案）

为何学习并使用Vue

1.发展趋势

最近这几年的前端圈子，因为戏台通常精彩纷呈，从 MVC 到 MVVM，你刚唱罢我登场。 backbone，AngularJS 已成昨日黄花，reactjs 如日中天，同时另外一更轻量的 vue 发展势头更猛，号称兼具了 angularjs 和 reactjs 的二者优势。

2.Vue能干嘛

移动端的上网需求已经远高于pc端，特别是 hybrid 方式的H5应用中，可是性能问题一直是痛点。 若是使用 SPA（就是俗称的单页应用（Single Page Web Application）），SPA它将全部的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会由于用户的操做而进行页面的从新加载或跳转。没有页面切换，就没有白屏阻塞，能够大大提升 H5 的性能，达到接近原生的流畅体验。

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,mysql ,pm2,nginx

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080 (本地启动)
npm run dev

# build for production with minification （生成静态文件，用于打包上传服务器）
npm run build
复制代码

主要实现的功能

1.用户登陆

2.用户注册

3.用户发帖

4.用户评论帖

5.用户留言

构建

使用vue-cli来构建初始化项目，很是方便，至关于生成项目模板这样子。

vuex

vue就我我的理解，是数据驱动，实现页面组件化开发，更好管理和维护，vuex是用做组件间的通讯，固然了若是页面够简单，也可使用其余方法进行通讯（传值），好比props等。

axios

说实话，项目前期我还用的是vue-resource，后面才统一改用axios（尤大大本人都力推的），两者都是用于客户端和服务端通讯的，也就是用做ajax请求的。

webpack

webpack是一款模块加载器兼打包工具，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。好比，咱们vue组件化开发，会用 ".vue" 文件，这种文件不会被浏览器所解析，因此须要用webpack来 "格式化" 他们，让他们变为浏览器能够解析的文件格式。还有，还有，用webpack，你就能够愉快的使用es6的语法啦！

express & mysql

所谓一个"系统"，怎么只能是简单的静态页面？在这里用了express（express 是一个基于 Node.js 平台的开发框架）和mysql来进行编写数据存储的后端api，用于用户信息在数据库里存储和读取。

pm2

pm2 是一个带有负载均衡功能的Node应用的进程管理器,并保证进程永远都活着，0秒的重载。按照个人理解，通俗的将，它的做用就是，本地开发环境，你要开启node服务，实现某些功能(好比监听某个端口)，就会在控制台执行"node app.js"(好比这个文件叫app吧！)，对应的node服务就会开启了，可是你只要一关闭这个控制台窗口，他就没有对应的服务进程了，每次起服务都得"控制台 -> node app.js"。在生产环境来讲，很麻烦，这会就用到了pm2，只须要执行一次"pm2 start app.js"。ok，一劳永逸，控制台窗口随你怎么自由开启关闭，对应的服务进程永远在后面运行着。

服务器目录

static和index.html是vue-cli构建的生产环境静态文件，server是写的服务端接口，使用pm2跑着（使用nginx作了一个端口转发），服务跑服务，静态页面是静态页面，互不影响。

Github地址

Github源码

项目预览

Vue_blog(只适配了移动端)