All Projects → biaochenxuying → Blog Vue Typescript

biaochenxuying / Blog Vue Typescript

vue + typescript + element-ui 支持 markdown 渲染的博客前台展示

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Blog Vue Typescript

Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-83.52%)
Mutual labels:  blog, markdown, vue-router, element-ui
Oblog
An Auto Rendering 🔽 Blogging System Based on MarkDown & Vue.js | 自动渲染装载 MarkDown 内容的博客系统
Stars: ✭ 133 (-89.46%)
Mutual labels:  blog, markdown, element-ui
Vue Element Quick Start
Vue2, Vuex 3, Vue Router 3, Element-ui and Typescript SPA project quick start kit(Vue element ui 快速开始脚手架)
Stars: ✭ 135 (-89.3%)
Mutual labels:  webpack4, vue-router, element-ui
vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (-92%)
Mutual labels:  vue-router, element-ui, webpack4
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (-91.68%)
Mutual labels:  webpack4, markdown, vue-router
Myblog
vue + node 实现的一个博客系统
Stars: ✭ 285 (-77.42%)
Mutual labels:  blog, markdown, vue-router
Laravel Blog
基于Laravel5.8构建的轻量博客应用,支持Markdown,支持图片拖拽上传,界面简洁,SEO友好,支持百度链接自动和手动提交
Stars: ✭ 84 (-93.34%)
Mutual labels:  blog, markdown
Vue Dropload
vue下拉加载,简单路由,模态框组件等开发
Stars: ✭ 55 (-95.64%)
Mutual labels:  vue-router, element-ui
Mall Admin Web
mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
Stars: ✭ 9,123 (+622.9%)
Mutual labels:  vue-router, element-ui
Vue Admin
基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 1,135 (-10.06%)
Mutual labels:  vue-router, element-ui
Docker Vue Node Nginx Mongodb Redis
🐉 An awesome boilerplate, Integrated Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to develop & build your web applications more efficient and elegant.
Stars: ✭ 34 (-97.31%)
Mutual labels:  vue-router, element-ui
Yizibi.github.io
✍️科学尚未普及,这里是唯一能让我找到自己的人,人生这么短,需要做点什么,😝,如果你来了,就顺手给个 star ,欢迎Fork,谢谢!
Stars: ✭ 61 (-95.17%)
Mutual labels:  blog, markdown
Blog
📚 专注Web与算法
Stars: ✭ 1,140 (-9.67%)
Mutual labels:  webpack4, blog
Fakescreenshot
🔥对抗假消息系列项目之一:截屏 = 实锤?相信你就输了!(”突破性“更新💥:支持修改任何网站!)
Stars: ✭ 1,058 (-16.16%)
Mutual labels:  vue-router, element-ui
Typecho
A PHP Blogging Platform. Simple and Powerful.
Stars: ✭ 8,417 (+566.96%)
Mutual labels:  blog, markdown
Blog Generator
static blog generator for my blog at https://zupzup.org/
Stars: ✭ 57 (-95.48%)
Mutual labels:  blog, markdown
Dbblog
基于SpringBoot2.x+Vue2.x+ElementUI+Iview+Elasticsearch+RabbitMQ+Redis+Shiro的多模块前后端分离的博客项目
Stars: ✭ 1,045 (-17.19%)
Mutual labels:  blog, element-ui
Xz Admin
基于Vue、element-ui技术栈开发的前后端分离后台管理系统(持续维护中)
Stars: ✭ 62 (-95.09%)
Mutual labels:  vue-router, element-ui
Markdownmonster
An extensible Markdown Editor, Viewer and Weblog Publisher for Windows
Stars: ✭ 1,203 (-4.68%)
Mutual labels:  blog, markdown
Vue element shopmanage
基于vue+element的商品后台管理
Stars: ✭ 75 (-94.06%)
Mutual labels:  vue-router, element-ui

简介

此项目是基于 Vue 全家桶 + TypeScript + Element-UI 技术栈的简洁时尚博客网站。

项目详情请猛戳该文章: Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年 势头迅猛,可谓遍地开花。

Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 将会更加普及,能够熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势。

效果

效果图:

  • pc 端

  • 移动端

完整效果请看:https://biaochenxuying.cn

功能

已经完成功能

  • [x] 登录
  • [x] 注册
  • [x] 文章列表
  • [x] 文章归档
  • [x] 标签
  • [x] 关于
  • [x] 点赞与评论
  • [x] 留言
  • [x] 历程
  • [x] 文章详情(支持代码语法高亮)
  • [x] 文章详情目录
  • [x] 移动端适配
  • [x] github 授权登录

待优化或者实现

笔者也是刚学的 TypeScript,对 TS 的运用还有待提高,后续会触入更多的 TypeScript 特性。

  • [ ] 使用 vuex-class
  • [ ] 更多 TypeScript 的优化技巧
  • [ ] 等出了 Vue3.0,用 Vue3.0 进行重构
  • [ ] 服务器渲染 SSR

前端主要技术

所有技术都是当前最新的。

  • vue: ^2.6.6
  • typescript : ^3.2.1
  • element-ui: 2.6.3
  • vue-router : ^3.0.1
  • webpack: 4.28.4
  • vuex: ^3.0.1
  • axios:0.18.0
  • highlight.js: 9.15.6
  • marked:0.6.1

Build Setup

 # clone
git clone https://github.com/biaochenxuying/blog-vue-typescript.git
# cd
cd  blog-vue-typescript
# install dependencies
npm install
# Compiles and hot-reloads for development
npm run serve
# Compiles and minifies for production
npm run build

如果要看有后台数据完整的效果,是要和后台项目 blog-node 一起运行才行的,不然接口请求会失败。

虽然引入了 mock 了,但是还没有时间做模拟数据,想看具体效果,请稳步到我的网站上查看 https://biaochenxuying.cn

项目地址与文档教程

项目地址:

vue 前台展示: https://github.com/biaochenxuying/blog-vue-typescript

react 前台展示: https://github.com/biaochenxuying/blog-react

管理后台:https://github.com/biaochenxuying/blog-react-admin

后端:https://github.com/biaochenxuying/blog-node

blog:https://github.com/biaochenxuying/blog

本博客系统的系列文章:

权衡

如何更好的利用 JS 的动态性和 TS 的静态特质,我们需要结合项目的实际情况来进行综合判断。一些建议:

  • 如果是中小型项目,且生命周期不是很长,那就直接用 JS 吧,不要被 TS 束缚住了手脚。
  • 如果是大型应用,且生命周期比较长,那建议试试 TS。
  • 如果是框架、库之类的公共模块,那更建议用 TS 了。

至于到底用不用TS,还是要看实际项目规模、项目生命周期、团队规模、团队成员情况等实际情况综合考虑。

其实本项目也是小项目来的,其实并不太适合加入 TypeScript ,不过这个项目是个人的项目,是为了练手用的,所以就无伤大大雅。

服务器

笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。

因为笔者就有自己的服务器,而且有两台了,用于平时的学习,还搭建了自己的网站。

有不少读者问过我,为什么我学的那么快的呢 ? 怎么在一年内学了那么知识的...

其实也没什么秘决,就是平时有自己的服务器了,就爱折腾,学到的知识能很快得到验证,所以学起来兴致高一点。

特别是大三和大四的学生,买了服务器,搭建个项目给面试官看也香,对找工作和面试都加分,还可以熟悉技术栈。

想学得快,就得有自己的服务器来折腾才行(低于 1 折、89/年、229/3年,比学生机还便宜)

比如笔者的两个网站:

https://biaochenxuying.cn/

https://www.kwgg2020.com/

最后

如果你觉得该项目不错,或者对你有所帮助,点个 Star 、或者真心赞赏一下 都是对我最大的鼓励,我会更有动力维护好该项目。

江山父老能容我,不使人间造孽钱

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].