[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8761":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},8761,"blog-vue-typescript","biaochenxuying\u002Fblog-vue-typescript","biaochenxuying","Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 支持 markdown 渲染的博客前台展示","https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog",null,"Vue",2624,615,41,5,0,57.37,false,"master",true,[22,23,24,25,26,27,28,29,30],"blog","element-plus","markdown","typescript","vite2","vue","vue-typescript-element","vue3","vue3-typescript","2026-06-12 04:00:41","![](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-527034962df50506.png?imageMogr2\u002Fauto-orient\u002Fstrip%7CimageView2\u002F2\u002Fw\u002F1240)\n\n\n## 简介\n\n**项目已经用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 重构完啦！**\n\nVue2 版本请点这里：[基于 Vue2 全家桶 + TypeScript + Element-UI](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-vue-typescript\u002Ftree\u002Fvue2) 或者 [v2.0.0](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-vue-typescript\u002Freleases\u002Ftag\u002Fv2.0.0)\n\n---\n\n此项目是基于 Vue3 全家桶 + TypeScript + element-plus 技术栈的简洁时尚博客网站。\n\n项目详情请猛戳该文章：\n\n- [Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6924687052005081095)\n\n\n## 效果\n\n效果图：\n\n- pc 端\n\n![](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-9f5f1b384a27c6ff.gif?imageMogr2\u002Fauto-orient\u002Fstrip)\n\n\n- 移动端\n\n![](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-5370ed6dfbe61051.gif?imageMogr2\u002Fauto-orient\u002Fstrip)\n\n\n\u003C!-- 完整效果请看：[https:\u002F\u002Fbiaochenxuying.cn](https:\u002F\u002Fbiaochenxuying.cn) -->\n\n\n## 功能\n\n### 已经完成功能\n\n- [x] 登录  \n- [x] 注册  \n- [x] 文章列表\n- [x] 文章归档\n- [x] 标签  \n- [x] 关于  \n- [x] 点赞与评论\n- [x] 留言\n- [x] 历程\n- [x] 文章详情（支持代码语法高亮）\n- [x] 文章详情目录\n- [x] 移动端适配\n- [x] github 授权登录\n\n\n[⬆️ 返回顶部](##简介)\n\n## 前端主要技术 \n\n所有技术都是当前最新的。\n\n- vue： ^3.0.5\n- typescript : ^4.1.3\n- element-plus: ^1.0.2-beta.41\n- vue-router : ^4.0.6\n- vite: ^2.2.3\n- vuex: ^4.0.0\n- axios: ^0.21.1\n- highlight.js: ^10.7.2\n- marked：^2.0.3\n\n\n[⬆️ 返回顶部](##简介)\n\n## Build Setup \n\n``` \n # clone\ngit clone https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-vue-typescript.git\n```\n\n```\n# cd\ncd  blog-vue-typescript\n```\n\n```\n# install dependencies\nnpm install\n```\n\n```\n# Compiles and hot-reloads for development\nnpm run dev\n```\n\n```\n# Compiles and minifies for production\nnpm run build\n```\n\n\n如果要看有后台数据完整的效果，是要和后台项目  **[blog-node](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-node)** 一起运行才行的，不然接口请求会失败。\n\n\u003C!-- 虽然引入了 mock 了，但是还没有时间做模拟数据，想看具体效果，请稳步到我的网站上查看 [https:\u002F\u002Fbiaochenxuying.cn](https:\u002F\u002Fbiaochenxuying.cn) -->\n\n\n[⬆️ 返回顶部](##简介)\n\n\n## 项目地址与文档教程\n\n**项目地址：**\n\n> [vue 前台展示: https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-vue-typescript](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-vue-typescript)\n\n> [react 前台展示: https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-react](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-react)\n\n> [管理后台：https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-react-admin](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-react-admin)\n\n> [后端：https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-node](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog-node)\n\n> [blog：https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fblog)\n\n**本博客系统的系列文章：**\n\n- [0. Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6959174069577220110)\n- [0. Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6924687052005081095)\n- [1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903718345768973)\n- [2. react + Ant Design + 支持 markdown 的 blog-react 项目文档说明](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903719260127239)\n- [3. 基于 node + express + mongodb 的 blog-node 项目文档说明](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903721680240653)\n- [4. 服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903721827041293)\n- [5. github 授权登录教程与如何设计第三方授权登录的用户表](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903789091094542)\n- [6. 一次网站的性能优化之路 -- 天下武功，唯快不破](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903798692020237)\n- [7. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903810457042957)\n- [8. 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903869755949069)\n\n\n[⬆️ 返回顶部](##简介)\n\n\n## 服务器\n\n笔者觉得每个开发者都应该拥有自己的网站和服务器，这可是很酷的事情，学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。\n\n因为笔者就有自己的服务器，而且有两台了，用于平时的学习，还搭建了自己的网站。\n\n有不少读者问过我，为什么我学的那么快的呢 ？ 怎么在一年内学了那么知识的...\n\n其实也没什么秘决，就是平时有自己的服务器了，就爱折腾，学到的知识能很快得到验证，所以学起来兴致高一点。\n\n特别是大三和大四的学生，买了服务器，搭建个项目给面试官看也香，对找工作和面试都加分，还可以熟悉技术栈。\n\n阿里云、腾讯云、华为云 都有，这里购买就是最优惠： [低于 1 折、89\u002F年、229\u002F3年，比学生机还便宜](https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fbiaochenxuying\u002Fissues\u002F1)）\n\n比如笔者的两个网站：\n\n\u003C!-- > https:\u002F\u002Fbiaochenxuying.cn\u002F -->\n\n> https:\u002F\u002Fwww.kwgg2020.com\u002F\n\n\n[⬆️ 返回顶部](##简介)\n\n\n## 项目推荐\n\n\n> 专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称的项目：https:\u002F\u002Fgithub.com\u002FFrontEndGitHub\u002FFrontEndGitHub\n\n> 以最优惠的方式购买极客时间课程：https:\u002F\u002Fgithub.com\u002Fbiaochenxuying\u002Fpreferential-courses ，涵盖了后端、架构、前端、移动、人工智能、大数据、产品、运营、运维、测试等\n\n\n[⬆️ 返回顶部](##简介)\n\n\u003C!-- \n## 撩我\n\n如果你觉得该项目不错，或者对你有所帮助，点个 Star，就是对我最大的鼓励，我会更有动力维护好该项目。\n\n\n| 微信 | 公众号 |\n| :------: |  :------: |\n| ID：**CB834301747** \u003Cdiv align=\"center\" style=\"margin-top: 10px;\"> ![CB834301747](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-d4d4cae18ddb84c5.png?imageMogr2\u002Fauto-orient\u002Fstrip%7CimageView2\u002F2\u002Fw\u002F360) \u003C\u002Fdiv> | ID：**QuanZhanXiuLian** \u003Cdiv align=\"center\" style=\"margin-top: 10px;\"> ![](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-50b85ba33dd7ba90.png?imageMogr2\u002Fauto-orient\u002Fstrip%7CimageView2\u002F2\u002Fw\u002F1240) \u003C\u002Fdiv> |\n\n\n> 欢迎关注微信公众号 “**[全栈修炼](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-9a13b43f4feb8f84.png?imageMogr2\u002Fauto-orient\u002Fstrip%7CimageView2\u002F2\u002Fw\u002F1240)**”，回复 **电子书** 就送你 **1000+** 本精华编程电子书；回复 **1024** 送你一套完整的 **前端** 视频教程。\n\n\n![](https:\u002F\u002Fupload-images.jianshu.io\u002Fupload_images\u002F12890819-860e00b3a4b6c418.png?imageMogr2\u002Fauto-orient\u002Fstrip%7CimageView2\u002F2\u002Fw\u002F1240)\n\n有需要的就来拿吧，**绝对免费，无套路获取**。\n\n\n[⬆️ 返回顶部](##简介) -->","此项目是一个基于 Vue3 全家桶 + TypeScript + element-plus 技术栈构建的简洁时尚博客网站。它支持文章列表、文章归档、标签管理、点赞与评论等功能，并且能够渲染 Markdown 格式的文本，实现代码语法高亮和移动端适配。该项目采用了包括 Vite2 在内的最新前端技术栈，确保了开发效率与性能优化。适用于需要快速搭建一个具备基本功能和个人风格的博客平台的开发者或内容创作者。",2,"2026-06-11 03:19:39","top_language"]