vue+elementplus模拟“山野愚人居”简单实现个人博客

目录

一、项目介绍

二、项目截图

1.项目结构图

 2.项目首页

3.文章详情

 4.留言

5.读者

三、源码实现

1.项目依赖package.json

2.项目启动

3.读者页面源码

四、总结


一、项目介绍

模仿原博客:山野愚人居 - 记录我的生活、所见、所闻、所想……

本项目参考以上博客样式实现,简单美观的样式最能吸引人,同时也是学习项目的好材料。

项目采用vite vue3框架搭建,集成了elementplus、 axios、vue-router、pinia、vant等。

二、项目截图

1.项目结构图

 2.项目首页

 

3.文章详情

 

 4.留言

5.读者

 

三、源码实现

         项目以组件(顶部、底部)+主布局页面配合路由构思实现,可以通过组件思维重复利用共同的局部页面,简单且美观,也更加利于后期功能页面拓展和维护、修改等。

1.项目依赖package.json

{"name": "vue3-project","version": "0.0.0","private": true,"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format": "prettier --write src/","prepare": "husky install","lint-staged": "lint-staged"},"dependencies": {"@element-plus/icons-vue": "^2.3.0","@vant/area-data": "^1.5.1","@vueup/vue-quill": "^1.2.0","axios": "^1.4.0","element-china-area-data": "^6.1.0","element-plus": "^2.3.7","express-jwt": "^8.4.1","jsonwebtoken": "^9.0.2","pinia": "^2.1.3","vant": "^4.9.0","vite-plugin-style-import": "^2.0.0","vue": "^3.4.0","vue-router": "^4.2.2","vuex": "^4.1.0"},"devDependencies": {"@rushstack/eslint-patch": "^1.2.0","@vitejs/plugin-vue": "^4.2.3","@vue/eslint-config-prettier": "^7.1.0","eslint": "^8.39.0","eslint-plugin-vue": "^9.11.0","husky": "^8.0.0","lint-staged": "^13.2.3","pinia-plugin-persistedstate": "^3.1.0","prettier": "^2.8.8","sass": "^1.63.6","unplugin-auto-import": "^0.16.6","unplugin-vue-components": "^0.25.1","vite": "^4.3.9"},"lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}

2.项目启动

依次成功执行以下两个命令:

  1. npm install
  2. npm run dev

3.读者页面源码

 

<template><div><section class="blockGroup"><h2 itemprop="name headline" class="s_title">读者</h2><article class="post single"><div class="p_time"><i class="iconfont icon-calendar"></i> 2008-11-01</div><p>我们眼中的博客无聊的时候,翻阅博友的文章,看看大家的生活,感觉自己多了一些朋友;无助的时候,写一写文字,宣泄不安的情绪,或许有人会给你安慰和鼓励;无眠的时候,听到博友推荐的某一首歌曲,渐渐的,被音乐带进梦乡。这,就是博客。</p><ul class="active-items"></ul></article><section class="ending"><ul class="sns"><li class="weibo"><a><i class="icon-sinaweibo"></i></a></li><li class="qrcode"><a><i class="icon-twitter"></i></a></li><li class="douban"><a><i class="icon-facebook"></i></a></li></ul><div class="reward">赏<ul><li><img src="../../assets/images/blog.png">用支付宝打我</li><li><img src="../../assets/images/blog.png">用微信打我</li></ul></div><div class="about"><img alt="" src="https://cdn.helingqi.com/avatar/184d1feffd65127623ecefa0a45ce220?s=80&amp;d=monsterid&amp;r=g" class="avatar avatar-80 photo" height="80" width="80"><p>生活是一种记录:记录所见、所闻、所想、所感……</p></div></section></section></div>
</template><script>export default {data() {return {};},mounted() {},methods: {}};
</script><style scoped>
</style>

四、总结

项目页面完整,后续可能将不断升级。

关注作者,及时了解更多好项目!

更多优质项目请看作者主页!

获取源码或如需帮助,可通过博客后面名片+作者即可!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/26681.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UITableView初识之分组显示数据Demo

基本介绍 继承自UIScrollView&#xff0c;因此可以滚动。 需要Datasource 遵循UITableViewDataSource协议的OC对象&#xff0c;都可以是UITableView的数据源&#xff0c;该协议中的方法告诉UITableView如何显示数据。 关于UITableView UITableView显示分组数据&#xff0c;对应…

企事业单位安全生产月活动怎样向媒体投稿?

作为一名单位的信息宣传员,我肩负着将每一次重要活动的精彩瞬间转化为文字,向外界传递我们单位声音的重任。初入此行时,我满怀热情,坚信通过传统的方式——电子邮件投稿,能够有效地将我们的故事传播出去。然而,现实却给我上了生动的一课。 记得在筹备“安全生产月”活动的宣传时…

韩顺平0基础学java——第21天

p430-440 enum昨日剩余 enum常用方法&#xff1a; 1.toString已经重写过了&#xff0c;返回的是当前对象名。子类可以重写 2.name&#xff1a;返回当前对象名&#xff08;常量名&#xff09;&#xff0c;子类中不能重写 3.ordinal&#xff1a;返回当前对象的位置号。默认从…

妙用OSGraph:发掘GitHub知识图谱上的开源故事

作者&#xff1a;范志东 1. 何为OSGraph&#xff1f; OSGraph (Open Source Graph) 是一个开源图谱关系洞察工具&#xff0c;基于GitHub开源数据全域图谱&#xff0c;实现开发者行为、项目社区生态的分析洞察。可以为开发者、项目Owner、开源布道师、社区运营等提供简洁直观的…

时序分解 | Matlab实现SCSSA-VMD融合正余弦和柯西变异的麻雀搜索算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现SCSSA-VMD融合正余弦和柯西变异的麻雀搜索算法优化变分模态分解时间序列信号分解 目录 时序分解 | Matlab实现SCSSA-VMD融合正余弦和柯西变异的麻雀搜索算法优化变分模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab…

曲线拟合 | 二次B样条拟合曲线

B 样条曲线拟合实例&#xff1a;能平滑化曲线 1. 实例1 为MASS包中mcycle数据集。它测试了一系列模拟的交通车事故中&#xff0c;头部的加速度&#xff0c;以此来评估头盔的性能。times为撞击时间(ms)&#xff0c;accel为加速度&#xff08;g&#xff09;。首先导入数据&#…

Docker(一)-认识Docker

1.docker理念 Docker是基于Go语言实现的云开源项目。 Docker的主要目标是“Build,Ship and Run Any App,Anywhere”&#xff0c;也就是通过对应用组件的封装&#xff0c;分发&#xff0c;部署&#xff0c;运行等生命周期的管理&#xff0c;使用户的应用及其运行环境能够做到”…

【机器学习300问】115、对比K近邻(KNN)分类算法与逻辑回归分类算法的差异与特性?

在学习了K近邻&#xff08;KNN&#xff09;和逻辑回归&#xff08;Logistic Regression&#xff09;这两种分类算法后&#xff0c;对它们进行总结和对比很有必要。尽管两者都能有效地执行分类任务&#xff0c;但它们在原理、应用场景和性能特点上存在着显著的差异。本文就是想详…

论文阅读:H-ViT,一种用于医学图像配准的层级化ViT

来自CVPR的一篇文章&#xff0c;https://openaccess.thecvf.com/content/CVPR2024/papers/Ghahremani_H-ViT_A_Hierarchical_Vision_Transformer_for_Deformable_Image_Registration_CVPR_2024_paper.pdf 用CNNTransformer混合模型做图像配准。可变形图像配准是一种在相同视场…

奇思妙想:多头RAG

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…

供应链初学者手册——第六部分:可持续供应链管理

供应链初学者手册 文章目录 供应链初学者手册第六部分&#xff1a;可持续供应链管理12. 绿色供应链管理12.1 可持续发展概念12.2 绿色供应链的实践 13. 可持续供应链案例分析13.1 真实案例研究13.2 成功经验和教训 总结 第六部分&#xff1a;可持续供应链管理 12. 绿色供应链管…

c语言利用openssl实现简单客户端和服务端(观察记录层最大长度)

文章目录 前言一、客户端实现二、服务端实现总结 前言 本文是使用openssl111w实现的简单客户端和服务端&#xff0c;主要用于观察openssl一个记录层数据包的大小。 一、客户端实现 #include <stdio.h> #include <stdlib.h> #include <string.h> #inc…

bugku---misc---赛博朋克

1、下载附件解压之后是一个txt文本&#xff0c;查看文本的时候看到头部有NG的字样 2、把txt改为png后缀得到一张图片 3、binwalk没发现奇怪的地方&#xff0c;分离出来还是图片 4、stegslove分析&#xff0c;切换图片没有发现奇怪地方 5、将通道rgb置为0。出现了flag但是flag不…

6.13长难句打卡

Hard times may hold you down at what usually seems like the most inopportune time, but you should remember that they won’t last forever. 艰难时刻可能会在你最不顺心的时刻让你低迷&#xff0c;但请相信&#xff0c;它们不会永远持续下去。

数据交易中公共物品属性

目录 数据交易中公共物品属性 公共物品属性 数据交易中公共物品属性 公共物品属性 传统上,公共物品的特性包括非排他性和非竞争性,这意味着一旦数据模型被创建,任何数据需求方都可以访问和使用它,而不影响其他方的使用。然而,在数据交易市场中,这种特性可能导致“搭便车…

通过apex启动flow

步骤 1&#xff1a;创建 Screen Flow 首先&#xff0c;确保您已经创建并激活了一个 Screen Flow。例如&#xff0c;创建一个简单的 Screen Flow&#xff0c;用于显示消息或执行特定逻辑。 步骤 2&#xff1a;定义 Flow 的输入变量 在 Screen Flow 中&#xff0c;定义所需的输…

179.二叉树:合并二叉树(力扣)

代码解决 /*** 二叉树节点的定义。* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* TreeNode(int x, Tre…

jQuery如何判断一个dom元素的display属性是不是block

在jQuery中&#xff0c;你可以使用.css() 方法来获取一个DOM元素的CSS属性&#xff0c;包括display属性。然后&#xff0c;你可以检查这个属性的值是否等于"block"。 以下是一个简单的示例&#xff0c;展示了如何使用jQuery来判断一个DOM元素的display属性是否为&qu…

opencv 通过滑动条调整阈值处理、边缘检测、轮廓检测、模糊、色调调整和对比度增强参数 并实时预览效果

使用PySimpleGUI库创建了一个图形用户界面(GUI),用于实时处理来自OpenCV摄像头的图像。它允许用户应用不同的图像处理效果,如阈值处理、边缘检测、轮廓检测、模糊、色调调整和对比度增强。用户可以通过滑动条调整相关参数。 完整代码在文章最后,可以运行已经测试; 代码的…

第3章 Unity 3D着色器系统

3.1 从一个外观着色器程序谈起 新建名为basic_diffuse.shader的文件&#xff0c;被一个名为basic_diffuse.mat的材质文件所引用&#xff0c;而basic_diffuse.mat文件则被场景中名为Sphere的game object的MeshRenderer组件所使用。 basic_diffuse.shader代码文件的内容如下所示…