Skip to content
vue + typescript + element-ui 支持 markdown 渲染的博客前台展示
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
tests/unit
.browserslistrc
.eslintrc.js
.gitignore
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
tsconfig.json
vue.config.js

README.md

前言

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

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

此项目是基于 Vue 全家桶 + TypeScript + Element-UI 的技术栈,且已经开源,github 地址 blog-vue-typescript

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

效果

效果图:

  • pc 端

  • 移动端

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

功能

已经完成功能

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

待优化或者实现

  • 使用 vuex-class
  • 更多 TypeScript 的优化技巧
  • 服务器渲染 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 ,不过这个项目是个人的项目,是为了练手用的,所以就无伤大大雅。

未来,class-compoent 也将成为主流,现在写 TypeScript 以后进行 3.0 的迁移会更加方便。

最后

鉴于问问题的人有点多,笔者时间有限,处理不过来,大家可以加入 QQ 群:186045338,加群暗号:全栈修炼 ,一起相互交流学习。

欢迎关注以下公众号,学到不一样的 武功秘籍

关注公众号并回复 福利 可领取免费学习资料,福利详情请猛戳: 免费资源获取--Python、Java、Linux、Go、node、vue、react、javaScript

BiaoChenXuYing.png

You can’t perform that action at this time.