vueblog-1: A JavaScript repository from webfrontzhifei

预览

如果演示网址无法访问，是由于我在阿里云服务器安装了部分软件导致的，一般过几个小时就自己恢复了，实在抱歉。

版本更新

v1.0.1 前端模板使用css3 flexbox进行了重构
v1.1.0 添加管理员在前台可编辑和删除文章功能
v1.1.1 添加评论组件
v1.1.2 添加eslint语法检测工具
v1.2.0 增加文章上传图片功能
v1.2.1 编辑器改用top-editor

v1已完成目标功能 v2将会使用Nuxt.js重构，服务端采用koa框架，数据库将会用mongoose代替原生mongodb写法，采用GraphQl查询语言代替RESTful api，实现自动化部署。

开发环境和技术栈

操作系统：windows10 64位
开发工具：webstorm sublime
前端：Vue + vue-router + vuex
后端：Node.js(采用express框架) + mongodb

特色功能

支持服务端渲染
支持标题动态切换
支持PWA
支持markdown语法，样式采用github风格，代码高亮
支持文章保存为草稿
支持标签和归档功能

目录结构

    ┌─ build                          // 配置文件
    ├─ example                        // 演示
    ├─ public                         // 公共资源
    ├─ server                         // 服务端
    │      ├─ db.js                   // 数据库dao层封装
    │      ├─ md5.js                  // 密码加密
    │      ├─ router.js               // 服务端路由
    │      └─ settings.js             // 数据库初始化配置
    ├─src                             // 前端
    │   ├─ api                        // 所有的api请求
    │   ├─ assets                     // 前端模板
    │   ├─ components                 // vue组件
    │   │          ├─ admin           // 后台可复用组件
    │   │          └─ global          // 前端可复用组件
    │   ├─ router                     // 前端路由
    │   ├─ store                      // vuex文件
    │   ├─ util                       // 公共函数库
    │   │    ├─ filters.js            // 过滤器函数
    │   │    └─ title.js              // 标题函数
    │   ├─ views                      // 组件库
    │   │    ├─ admin                 // 后台组件
    │   │    ├─ Article.vue           // 文章详情页
    │   │    ├─ CreateListView.js     // 预渲染
    │   │    ├─ List.Vue              // 文章列表
    │   │    └─ Login.Vue             // 登陆
    │   ├─ app.js                     // 项目入口文件
    │   ├─ App.vue                    // 全局组件
    │   ├─ entry-client.js            // 客户端渲染
    │   ├─ entry-server.js            // 服务端渲染
    │   └─ index.template.html        // 模板
    ├─ static                         // 静态文件
    ├─ .babelrc                       // babel配置
    ├─ .gitignore                     // git上传忽略
    ├─ ecosystem.json                 // pm2配置
    ├─ manifest.json                  // PWA配置
    ├─ LICENSE                        // 开源协议
    ├─ package.json                   // npm包管理
    ├─ README.md                      // 项目说明
    ├─ server.js                      // 项目启动文件
    └─ yarn.lock                      // yarn配置