GithubHelp home page GithubHelp logo

popoppin / vueblog Goto Github PK

View Code? Open in Web Editor NEW

This project forked from essay-org/essay

0.0 0.0 0.0 1.92 MB

A vuejs and nodejs project :cn:

Home Page: https://vueblog.86886.wang

License: GNU General Public License v3.0

JavaScript 45.24% Vue 19.28% CSS 25.68% HTML 9.80%

vueblog's Introduction

Build Status Version License

预览

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

版本更新

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

最新计划

  • 添加eslint语法检测工具
  • 文章上传图片功能
  • 支持图片上传的markdown编辑器插件
  • 手机端模板调整(APP标准)
  • 增加单元测试

开发环境和技术栈

  • 操作系统: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配置

pc端效果图

首页效果图

image

代码高亮效果图

image

后台发布页面

image

后台文章列表

image

修改个人信息

image

手机端效果图,以chrome浏览器演示

添加到主屏

image

文章页效果

image

Lighthouse测试

image

本地运行项目

  1. 安装mongodb并启动
  2. 安装nodejs环境
  3. 打开本地终端,执行npm install,npm run dev ,访问http://localhost:8080
  4. 后台的默认用户名:q,默认密码:q

结语

本项目基于vue-hackernews-2.0开发,长期更新,由于是个人项目,不建议直接用于线上,欢迎issue,欢迎PR,该项目不会添加过多复杂功能,追求轻量,以原生APP的体验作为目标。

后期会把部分功能插件化,之所以自己开发vue插件,并不是我喜欢造轮子,真的是找不到满意的轮子,比如说markdown编辑器,要么不支持图片上传,要么体积特别大,所以我决定全部自己开发。时间如果充足的话,我会更新所有的开发教程。

开源协议

GPL-3.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.