【网站】Vue3+ThinkJS搭建个人博客网站

最新推荐文章于 2024-07-10 13:45:25 发布
最新推荐文章于 2024-07-10 13:45:25 发布
阅读量590 收藏 2
点赞数
分类专栏： Vue 杂物箱 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44707049/article/details/124902328
版权
本文分享了使用Vue3、ThinkJS和TypeScript搭建个人博客的过程，包括前端页面设计、登录功能、首页布局以及接口文档。前端采用Vue3、Naive UI，后端使用ThinkJS和MySQL。网站提供了登录、首页展示（顶部导航、日志记录卡片、文章列表、用户信息卡片）、写文章和查看文章的功能。
摘要由CSDN通过智能技术生成

花费了一个多星期，终于把自己的小破站搭建好了。下面是网站首页的截图。

image.png

网站的前端用的是：Vue3 + Ts + Naive
网站的后端用的是：ThinkJS + MySQL

网站的在线预览地址是: 非常厉害噻
登录账号：test      登录密码：123

前端页面

登录页面

登录页面做的比较简陋，因为实在是想不出怎么做才好，简简单单才是真。

image.png

因为算是第一版吧，而且主要是个人和女朋友在用，所以并没有对密码做加密处理，都是明文密码，登录模块也是今天匆忙加上去的，还有很多地方待完善。

登录做了 localStorage 处理，一次登录之后下次进来就不用登录了，没有做登出逻辑，所以想要登出切换账号就只能去把缓存清掉。

网站首页

主要把网站首页分为4个部分，顶部导航栏、左边的日志记录卡片，中间的全部文章列表，右边的用户信息卡片。

顶部导航栏

采用的是fl

最低0.47元/天 解锁文章
不大好不大好
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用vue3制作一个简单的小米网站的代码
weixin_35749796的博客
12-28 262
好的，这是一份使用 Vue 3 制作一个简单的小米网站的代码示例： <template> <div class="mi-website"> <header> <h1>小米网站</h1> <nav> <ul> <li v-for="item...
sau交流学习社区--基于thinkjs+vue+redis+mysql+es6开发的周报企业管理系统weekly
saucxs
12-03 923
weekly 周报系统主要是node+vue+redis+mysql+es6，一个企业管理系统，企业员工汇报每周工作情况，以及完成情况，各级负责人可以查看和提醒相应未写周报人员。 ，后端完全使用nodeJS，数据库使用mysql，基于nodejs的thinkjs框架搭建的，如果喜欢nodeJS写的后端，支持大前端，支持全栈开发，请请star并fork项目。 同步到sau交流学习社区：https...
vue3做的网站，vue页面，vue网页，vue项目
2401_85352839的博客
06-22 250
html+css+js+vue做的，用的vue3的写法，v-for，v-model，点击事件，vue-router，本地存储，生命周期这些都有用到，页面可以正常跳转，功能可以正常使用。页面有首页，购物车页，订单页，农产品简介页，关于我们页，详情页，登录页和注册页一共8页，纯前端没有后端和数据库。使用vue3做的一个纯前端网站。主题是农产品销售，农产品主题。
Vue3实战教程：从概念到部署的完整项目搭建
最新发布
A_Liyulong的博客
07-10 3026
太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。测试创建./store/user.ts，引入组件，打印效果例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
基于Vue3+TS+StoryUI+elementPlus的个人网站——StoryWeb
weixin_50786692的博客
11-16 1497
基于Vue3+TS+StoryUI+elementPlus的个人网站——StoryWeb 前言：各位读者，大家好，很开心你能够阅读这篇文章，这篇文章的目的是对我通过近2个月，利用工作之余，开发的个人网站做一个总结。同时，我认为写博客最大的意义在于能够记录自己的成长以及帮助他人。所以我会尽量在分享自己心得体会的同时，尽量多写一些干货，希望能够对得起看这篇文章的你，好了，接下来我们开始吧！ 1.简介篇 访问地址：http://songxiaopenggitee.gitee.io/story-web-v1 源码
用vue3制作一个简单的小米网站
weixin_42589700的博客
12-28 557
在制作简单的小米网站时，您可以使用 Vue 3 框架来帮助您更轻松地开发网站。您可以使用 Vue 3 的响应式系统来构建网站的用户界面，并使用 Vuex 来管理应用程序的状态。 首先，您需要安装 Vue 3 和 Vue CLI，这是 Vue 3 的命令行界面工具，可用于创建和设置 Vue 项目。您可以使用以下命令来安装它们： npm install -g @vue/cli ...
Vue3创建最基础的博客网站示例
风不归的乐园
12-06 894
Vue3创建最基础的博客网站示例
8种方式搭建个人专属博客
03-14
三种方式：Github + hexo matery ，VuePress +Gitee，ThinkJS + MySQL 搭建博客需要掌握 `Node.js` ，前两种方式本地写好 `markdown`文件，项目打包的时候会按照文章内容，生成对应的文章页面。第三种方式会将文章...
VUE+TS+WEBPACK框架的项目实践
热门推荐
码匠哥的技术博客
08-27 1万+
一、作者简介 WONDER专注于框架的研究，致力于提升效能，解放生产力。包括但不限于设计流程化，重构流程化，前端流程化，基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究（包括前端(vue为核心)，后端(thinkjs为核心)，终端(weex为核心、小程序为辅助)），目标以「技术引擎」的思想为业务侧提供强劲动力和生产力。 二、前言 很久以前在WOND
周报系统的技术栈主要是node+vue+redis+mysql+es6.zip
04-19
一个企业管理系统，企业员工汇报每周工作情况，以及完成情况，各级负责人可以查看和提醒相应未写周报人员，后端完全使用nodeJS，数据库使用mysql，基于nodejs的thinkjs框架搭建的 MySQL 是一款广受欢迎的开源关系型...
Vue实现图形化积木式编程Thinkjs后端源码
08-31
【Vue实现图形化积木式编程Thinkjs后端源码】是一个专为少儿编程教育设计的后端系统，它利用了现代Web开发技术栈，包括JavaScript、Node.js、ThinkJS框架以及MySQL数据库，来构建一个高效、可扩展的平台。...
vue20全家桶thinkjs框架
08-10
vue2.0全家桶 thinkjs框架
使用vue3、nodejs搭建的网站
陆克成长记
09-22 221
前端使用了vue3和ts，后端使用nodejs、express、mysql等如需源码，请留言。
【Vue3】项目的设计与实现：从0开始搭建一个测试用例平台网站＜一＞
清凌的博客
07-05 1219
前言： 从上个月开始搭建这个网站，正好一个月 今天决定停止开发，下面说一下整个设计流程和思路 1.建立原型 原型是一切起始的关键： 按照自己的想法，大概设计了下面几个原型：（用powerPoint俗称PPT的形状工具画的 = =） 最后的成品: 如果可以把功能拆得更细一些，我觉得自己还能写得更快更好， 当然，这个程序是有服务器和数据库的。 项目的大小和规模，取决于使用者和具体的设计需求，前期一定要把需求把握好， 例如： 有几个人用？哪些功能必须有？是否需要鉴权（登录密码和账户）？如何确保账户
VUE3 + Django进行Web网站开发
liuning2008的专栏
12-13 365
VUE3（前端） + Django（后台）开发的web网站，接入了微信和支付宝支付，可以售卖资源。
基于vue3开发一个北京当地特色浏览网站
三拾的博客
04-25 1862
该项目旨在开发一个基于Vue 3的网站，用于浏览北京当地的特色景点和美食。
Vue+thinkJs博客网站（二）之thinkJs的使用
weixin_34056162的博客
02-25 825
一.简介 这个个人博客网站最初制作的目的就是练习使用thinkJs，这一篇就主要讲一下thinkJs的一些特性和注意事项。涉及到了文件上传，thinkJs的插件机制，model层建立以及CURD的编写方式等。本项目github地址在这里。 项目thinkJs端主要参考了知乎上大佬Ischo的文章，链接在这。 二.thinkJs model...
vue3+node(koa2)写一个网站(一)-前端篇
海阔天空
11-08 1330
采用vue-cli 4.5.0生成项目目录。新版本的脚手架生成的项目 main.js与之前旧版本略有不同，新版本如下： //main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 法一 const app = createApp(App); app.use(router) app.mount('#app') //法二 //createApp(App
Vue3+Nuxt3 从0到1搭建官网项目，SEO搜索、中英文切换、图片懒加载
拿回忆下酒
04-29 2864
想开发一个官网，并且支持SEO搜索，当然离不开我们的nuxt，nuxt2我们刚刚可以熟练运用，现在有出现了nuxt3，那通过本篇文章让我们一起了解一下。
vue3+ts个人博客搭建
08-22
要搭建一个基于Vue3和TypeScript的个人博客，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和npm，这是构建Vue项目所必需的工具。 2. 创建一个新的Vue项目。你可以使用Vue CLI来快速生成一个基本的Vue项目结构。打开终端并执行以下命令： ``` vue create my-blog ``` 在创建项目的过程中，你可以选择使用TypeScript作为项目的语言。 3. 安装必要的依赖。在终端中进入项目目录，并执行以下命令： ``` cd my-blog npm install ``` 4. 添加路由功能。Vue Router是Vue.js官方推荐的路由管理工具，可以帮助你在应用程序中实现页面之间的导航。你可以通过以下命令来安装Vue Router： ``` npm install vue-router ``` 在项目中创建一个`router`文件夹，并在其中创建一个`index.ts`文件来配置路由。在`index.ts`文件中，你可以定义各个页面对应的路由路径和组件。 5. 创建博客页面。根据你的需求，你可以创建主页、文章列表页、文章详情页等不同的页面。在Vue中，每个页面都可以通过一个单独的组件来表示。你可以在`src/views`文件夹中创建这些组件，并在路由配置中引入它们。 6. 设计博客布局。你可以使用Vue组件来构建博客的布局，比如导航栏、页脚和侧边栏等。你可以在`src/components`文件夹中创建这些组件，并在页面组件中使用它们。 7. 添加数据管理。你可以使用Vuex来管理应用程序的状态。Vuex是Vue.js官方推荐的状态管理工具，可以帮助你在不同组件之间共享和管理数据。你可以通过以下命令来安装Vuex： ``` npm install vuex ``` 在项目中创建一个`store`文件夹，并在其中创建一个`index.ts`文件来配置Vuex的状态和操作。 8. 添加其他功能和样式。根据你的需求，你可以添加评论功能、标签功能、搜索功能等。你还可以使用Element Plus等UI库来美化你的博客界面。 9. 编写并发布文章。你可以使用Markdown来编写博客文章，并将其存储在数据库或文件中。然后，你可以在博客页面中读取和展示这些文章。 10. 部署博客。你可以选择将你的博客部署到云服务器、静态网站托管服务或者自己的个人服务器上。你可以使用Vite进行打包和优化，以提高博客的性能和加载速度。 以上是搭建基于Vue3和TypeScript的个人博客的一般步骤。具体细节和实现方式可能因个人需求而有所不同。你可以根据自己的情况进行相应的调整和扩展。希望这些信息对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化](https://download.csdn.net/download/qq_42717015/87775817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口](https://download.csdn.net/download/qq_42425561/85103234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [ruoyi-vue-pro yudao 项目报表设计器 积木报表模块启用及相关SQL脚本](https://download.csdn.net/download/zengwenbo225566/88234865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值