# blog-vue-typescript **Repository Path**: xiangzc/blog-vue-typescript ## Basic Information - **Project Name**: blog-vue-typescript - **Description**: 来源于https://github.com/biaochenxuying/blog-vue-typescript.git - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2021-11-20 - **Last Updated**: 2025-12-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ![](https://upload-images.jianshu.io/upload_images/12890819-527034962df50506.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 简介 **项目已经用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 重构完啦！** Vue2 版本请点这里：[基于 Vue2 全家桶 + TypeScript + Element-UI](https://github.com/biaochenxuying/blog-vue-typescript/tree/vue2) 或者 [v2.0.0](https://github.com/biaochenxuying/blog-vue-typescript/releases/tag/v2.0.0) --- 此项目是基于 Vue3 全家桶 + TypeScript + element-plus 技术栈的简洁时尚博客网站。 项目详情请猛戳该文章： - [Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记](https://biaochenxuying.cn/articleDetail?article_id=6092b45dbec6a37766420fe3) ## 效果 效果图： - pc 端 ![](https://upload-images.jianshu.io/upload_images/12890819-9f5f1b384a27c6ff.gif?imageMogr2/auto-orient/strip) - 移动端 ![](https://upload-images.jianshu.io/upload_images/12890819-5370ed6dfbe61051.gif?imageMogr2/auto-orient/strip) 完整效果请看：[https://biaochenxuying.cn](https://biaochenxuying.cn) ## 功能 ### 已经完成功能 - [x] 登录 - [x] 注册 - [x] 文章列表 - [x] 文章归档 - [x] 标签 - [x] 关于 - [x] 点赞与评论 - [x] 留言 - [x] 历程 - [x] 文章详情（支持代码语法高亮） - [x] 文章详情目录 - [x] 移动端适配 - [x] github 授权登录 [⬆️ 返回顶部](##简介) ## 前端主要技术 所有技术都是当前最新的。 - vue： ^3.0.5 - typescript : ^4.1.3 - element-plus: ^1.0.2-beta.41 - vue-router : ^4.0.6 - vite: ^2.2.3 - vuex: ^4.0.0 - axios: ^0.21.1 - highlight.js: ^10.7.2 - marked：^2.0.3 [⬆️ 返回顶部](##简介) ## 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 dev ``` ``` # Compiles and minifies for production npm run build ``` 如果要看有后台数据完整的效果，是要和后台项目 **[blog-node](https://github.com/biaochenxuying/blog-node)** 一起运行才行的，不然接口请求会失败。 虽然引入了 mock 了，但是还没有时间做模拟数据，想看具体效果，请稳步到我的网站上查看 [https://biaochenxuying.cn](https://biaochenxuying.cn) [⬆️ 返回顶部](##简介) ## 项目地址与文档教程 **项目地址：** > [vue 前台展示: https://github.com/biaochenxuying/blog-vue-typescript](https://github.com/biaochenxuying/blog-vue-typescript) > [react 前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react) > [管理后台：https://github.com/biaochenxuying/blog-react-admin](https://github.com/biaochenxuying/blog-react-admin) > [后端：https://github.com/biaochenxuying/blog-node](https://github.com/biaochenxuying/blog-node) > [blog：https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog) **本博客系统的系列文章：** - [0. Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践](https://juejin.cn/post/6924687052005081095) - [1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站](https://biaochenxuying.cn/articleDetail?article_id=5bf57a8f85e0f13af26e579b) - [2. react + Ant Design + 支持 markdown 的 blog-react 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf6bb5e85e0f13af26e57b7) - [3. 基于 node + express + mongodb 的 blog-node 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf8c57185e0f13af26e7d0d) - [4. 服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的](https://biaochenxuying.cn/articleDetail?article_id=5bfa728bb54f044b4f9da240) - [5. github 授权登录教程与如何设计第三方授权登录的用户表](https://biaochenxuying.cn/articleDetail?article_id=5c7bd34e42b55e2ecc90976d) - [6. 一次网站的性能优化之路 -- 天下武功，唯快不破](https://biaochenxuying.cn/articleDetail?article_id=5c8ca2d3b87b8a04f1860c9a) - [7. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记](https://biaochenxuying.cn/articleDetail?article_id=5c9d8ce5f181945ddd6b0ffc) - [8. 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题](https://biaochenxuying.cn/articleDetail?article_id=5cfcc6798090bd3c84138a08) [⬆️ 返回顶部](##简介)