vue3个人博客，从零到一搭建

已于 2023-02-22 18:44:32 修改
阅读量1.5k 收藏 9
点赞数 3
文章标签： javascript 后端 typescript 前端框架 vue.js
于 2023-02-22 16:10:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_zuka/article/details/129164619
版权

vue3.2 + ts + vite + nestjs从零搭建个人博客

简介

一个开源的博客，仅用于学习和记录日常的知识点。前端使用了最新的vue3,vite2,TypeScript等主流技术开发，后端使用的是最契合Typescript的nestjs开发，数据库采用的是mysql，代码管理采用的是自己搭的轻量级gitea，后端考虑到服务器和数据库的安全性暂时代码不开源，后期整理后会开源~。

页面地址：https://shizuka.icu

代码地址：https://git.shizuka.icu/ajuna/blog2.0.git

特性

  • 最新技术栈：使用 Vue3.2/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言，强类型限制，便于后期的维护工作
  • 框架 在 vben admin 的基础上改造了路由、登录、构建菜单的功能，普通用户不登录可以查看文章等操作，注册登录的用户可以对文章评论进行点赞、点踩、收藏和举报。
  • 后端技术：采用的是比较成熟的 nestjs 框架，实现了比如用 redis 缓存用户登录信息，登录挤出功能，支持邮箱、手机号注册功能、短信发送采用的是阿里云短信系统，邮件采用的是腾讯的邮件系统，使用 typeorm 配合 mysql 实现数据持久化等等
  • 服务器部署、管理：采用的阿里云服务器，通过nginx代理、pm2管理后端服务。
  • 功能迭代：持续迭代改进。。。
    nginx代理
    pm2集群管理

功能

  • 登录注册（支持邮箱、手机号）
  • 评论（回复）、留言、评论举报、收藏文章、个人信息修改、生活点滴等 需要登录
  • 发布文章 基于用户权限
  • 更换主题皮肤
  • 色弱、色盲、（樱花、雨、雪）动态

页面样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

持续更新中，欢迎老铁参观留言，谢谢！！！

shi_zuka
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue博客：基于Vue写的简单的博客页面
02-07
我的博客 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
从零开始创建一个个人博客前端Vue，后端node.js（第一天）
weixin_52153452的博客
01-30 3826
开发个人博客第一天
Vue3——简易版个人空间(上半部分)
测试
05-15 794
使用vue 的图形化界面创建一个新的vue3项目如下图所示装两个新的插件——router和vuex插件该过程的可能有点久，需要耐心等待。再装一些需要的依赖需要用到的依赖: boostrap和poperjs/core（bootstrap是提供给不会做美工的程序员的一个新的好选择）第二个依赖是使用bootstrap时需要用到的一个依赖。到此为止，该项目需要用到的东西已经装完。
VueBlog：一个轻量级、易扩展的Vue.js博客框架
gitblog_00096的博客
03-22 449
VueBlog：一个轻量级、易扩展的Vue.js博客框架 项目地址:https://gitcode.com/MarkerHub/vueblog VueBlog 是一款基于Vue.js和Vite构建的现代化个人博客系统，它的设计目标是提供一个快速搭建、易于定制且具有出色性能的博客平台。对于前端开发者尤其是Vue爱好者来说，这是一个不容错过的选择。 技术剖析 VueBlog的核心特性在于其充分利用了现...
博客管理系统|基于SpringBoot+Vue+ElementUI个人博客系统的设计与实现
znzbs的博客
07-22 3836
博客，又叫网络日志，是一个通常由个人管理，不定期发布新的文章的网站。博客上的文章通常根据发布的时间，用倒序的方式由新到旧排列。许多博客专注在特定的课题上提供评论和新闻，其他的被作为个人日记。一个典型的博客结合了文字、图像、其他博客或者网站的链接、以及其他相关的主题为主的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，博客是社会媒体网络的一部分。
vue2/3 - 【完整源码】实现评论区发表评论、回复评论、评论盖楼等功能，前端PC网站/移动端H5实现多用户评论与回复功能（详细示例源码，一键复制开箱即用）
高级前端工程师
07-31 4753
vue评论功能详细教程，Vue实现评论与回复功能，Vue.js实现文章评论和回复评论功能，vue 实现评论回复功能，vue如何实现评论区，vue网站PC移动端h5怎么做评论区发表留言及回复功能，vue2实现评论区插件，vue评论区相互发表回复功能详细教程，vue有没有评论区的组件插件示例源码，vue评论盖楼，vue实现文章评论和回复列表，vue文章评论与回复，vue实现发表评论功能，Vue 移动端文章视频评论发表，Vue-cli从零开始实现文章评论回复功能，利用Vue+ElementUi实现评论功能，vue
vue+elementui+mysql实现个人博客系统
qq_53325717的博客
07-29 680
使用Vue.js、Element UI和MySQL来实现个人博客系统
Vue--搭建个人博客
old brother stable
01-12 8631
1.初始化vue项目 1.1环境初始化 1.安装node。官网直达 2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue脚手架vue-cli。 npm install --global vue-cli 1.2创建项目
vue开发个人博客
huangjiangmin
01-05 9074
vue实现个人简约博客
vue+element详细完整实现个人博客、个人网站
lucky_fang的博客
01-16 8621
接上一篇《vue+elementui实现非常好看的博客、网站首页，网站模板》。 上一篇实现了整个框架的搭建和首页的编码，在此基础上，这一期进行了最终的功能页面完善，增加了功能：同时对样式进行了更深层的改造和优化。 文章详情： 心情说说+我的相册+相册详情 所有文章+标签合集 四.数据处理 主要数据就是文章+相册，分别声明为json数据格式，存储于页面缓存，因为app.vue是一定会加载的，所以作者把这些初始化数据和存储操作都放在了app.vue，利于其他页面获取缓存加载
SpringBoot+Vue 博客系统（二）：个人博客的搭建
YangCunle的博客
05-30 666
创作不易，如果对你有所帮助，请一键三连。
vue-cli3 从搭建到优化的详细步骤
10-17
主要介绍了vue-cli3 从搭建到优化的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Vue3 搭建的个人博客系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于Vue3的个人博客聊天室IM设计源码
04-16
本源码项目是基于Vue3的个人博客聊天室IM设计，包含63个文件，主要使用JavaScript、Vue、CSS和HTML编程语言。该项目旨在创建一个具有聊天室功能的个人博客，使用SpringBoot和Vue技术栈。系统提供了博客文章的发布、...
Vue3 从零搭建项目及插件的使用
01-20
Vue3 从零搭建项目及插件的使用，完整代码
基于SpringBoot+Vue的个人博客开发
05-14
基于SpringBoot+Vue的个人博客开发： 功能点： 1.前后端数据传输采用ASE进行加密传输，前端通过修改发送请求头将明文进行加密，后端2.通过Aop对数据进行加密和解密； 3.token令牌，通过username加密生成token，存入...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 671
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 784
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 47
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
vue3零基础详细教程
05-11
Vue 3 是一款流行的 JavaScript 框架，它用于构建动态的 Web 应用程序。如果你想学习 Vue 3，这里是一个逐步详细的教程： 1. 安装 Vue 3 首先，你需要安装 Vue 3。你可以在终端窗口中运行以下命令来安装 Vue 3： ``` npm install vue@next ``` 2. 创建 Vue 3 应用程序 在安装完 Vue 3 之后，你需要创建一个新的 Vue 3 应用程序。你可以使用 Vue CLI 来创建一个新的项目。在终端窗口中运行以下命令来安装 Vue CLI： ``` npm install -g @vue/cli ``` 接下来，在终端窗口中运行以下命令来创建新的 Vue 3 项目： ``` vue create my-app ``` 这将创建一个名为 "my-app" 的新项目。在创建项目的过程中，你可以选择使用默认设置或自定义设置。 3. 编写 Vue 3 组件 Vue 3 应用程序是由组件构成的。要创建一个新的组件，请在 "src" 目录中创建一个新的 ".vue" 文件。例如，你可以创建一个名为 "HelloWorld.vue" 的组件，并在其中编写以下代码： ```html <template> <div> <h1>Hello, {{ name }}!</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { name: { type: String, required: true } } } </script> ``` 该组件将渲染一个标题，其中包含一个名为 "name" 的属性。 4. 在 Vue 3 应用程序中使用组件 要在 Vue 3 应用程序中使用组件，请在 "App.vue" 文件中导入组件，并在模板中使用组件。例如，你可以在 "App.vue" 文件中添加以下代码： ```html <template> <div> <HelloWorld name="Vue 3" /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> ``` 在该代码中，我们导入了 "HelloWorld" 组件，并在模板中使用了该组件。 5. 运行 Vue 3 应用程序 现在，你可以运行 Vue 3 应用程序。在终端窗口中运行以下命令来启动开发服务器： ``` npm run serve ``` 然后，你可以在浏览器中访问 "http://localhost:8080" 来查看你的 Vue 3 应用程序。 这是一个简单的 Vue 3 应用程序的例子。你可以继续深入学习 Vue 3，以掌握更高级的概念和技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值