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

一、项目介绍

二、项目截图

1.项目结构图

2.项目首页

一、项目介绍

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

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

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

二、项目截图

1.项目结构图

2.项目首页

3.文章详情

4.留言

5.读者

三、源码实现

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

1.项目依赖package.json

javascript 复制代码

{
  "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.项目启动

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

npm install
npm run dev

3.读者页面源码

html 复制代码

<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>

四、总结

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

关注作者，及时了解更多好项目！

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

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