使用Vue+ElementUI搭建属于自己的个性博客

置顶 已于 2023-08-13 12:45:33 修改
阅读量8k 收藏 54
点赞数 22
分类专栏： Vue 文章标签： vue elementui
于 2021-03-08 16:27:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XINYANGXINNIAN/article/details/114535828
版权

博客介绍

前端页面纯使用VUE + VUEX + ElementUI框架，请求使用axios，路由使用vue-router，及其他优秀小插件完成，完全抛弃了Html以及Jquery，搭建一套完全属于自己的个性博客。 很多页面以及插件都是H5转VUE实现的，虽然过程有点艰苦，不过结果还是挺好的。

博客包含一下模块：

  • 首页
  • 博文
  • 美文
  • 心语
  • 资源
  • 友链
  • 关于
  • 第三方登录（qq、微博）

项目目录介绍：

本源码使用mock模拟数据 

博客地址：预览

github地址：zhua-blog-ui-dome

视频介绍

Zhua个人博客

页面展示

首页：

博文：

美文：

心语：

资源：

留言：

友联：

关于：

第三方登录：

zhua.er
关注
  • 22
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
vue实战入门进阶篇三：vue+elementui实现网站后台-系统框架搭建
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-17 1053
vue实战入门进阶篇四：vue+elementui实现网站后台-主页框架实现
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
10-17
主要介绍了Vue+ElementUI从零开始搭建自己的网站（一、环境搭建），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VueAdmin:使用Vue+ElementUI搭建的管理系统的简单架子
05-28
vue-admin 原型是根据做了一些修改 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 目前版本为 v4.0+ 基于 vue-cli 进行构建 对前端不是很了解 所以就是一边看一边搜 根据自己想要的修改了一些 整合自己的后端基础版本 完成了登录注销等 获取用户信息附带信息是写死的 使用SpringCloud Alibaba构建的 包含一些基础模块 动态路由是先把所有的页面都定义在asyncRoutes中 然后根据登录的角色 去匹配路由meta里的角色来生成路由 然后根据路由生成菜单 暂时没太看明白这里的具体逻辑 后面懂了再写 原作者重写了导航栏这一部分 不是用的ElementUI 所以对获取路由变成菜单的逻辑还不是很懂 详解(有空再
简易vue elementui界面
weixin_45939316的博客
04-26 370
将这4个文件导入到自己的项目中 src/assets/css/iconfont下（/css/iconfont）自己创建的文件夹。在main.js中引入import ‘@/assets/css/iconfont/iconfont.css’1.vue install -g @vue/cli 全局安转。3.强制设置element ui中样式。6.npm run serve运行即可。三、强制设置element ui中样式。4.使用iconfont.cn中图标。四.使用iconfont.cn中图标。
简约个性高逼格响应式个人博客模板
06-06
完整的一套前端页面 页面非常炫酷 简约而不失逼格 并且附带动画特效 随光标而移动 欢迎下载使用
探索Vue Blog Demo：一款现代且可定制化的博客框架
gitblog_00039的博客
04-18 287
探索Vue Blog Demo：一款现代且可定制化的博客框架 项目地址:https://gitcode.com/snipcart/vue-blog-demo Vue Blog Demo 是一个基于 Vue.js 框架构建的开源博客模板，由 Snipcart 团队提供。它不仅展示了 Vue.js 的强大功能，还为开发者提供了一个快速启动个人或企业博客项目的起点。本文将深入探讨其技术特性、应用场景及优...
基于Vue和Element UI搭建的博客前端界面
qq_43726400的博客
02-07 3966
项目地址 演示地址 前言 之前我的个人博客系统是使用SpringBoot和thymeleaf模板引擎开发的，个人觉得还可以，最近突发奇想，何不借点时间，把博客重构一下，使用Vue作为前端，SpringBoot最为后端，前后端分离，继续夯实自己的实力。 实现方法 大概的思路是沿用大部分旧博客的后端逻辑，之前持久层是使用JPA，后面视具体情况而定，有可能换用MyBatis。 前端使用Vue作为模板引擎， 是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的，在国内十分流行，在这
Vue3 + Element-UI 搭建一个后台管理系统框架模板
三拾的博客
04-25 6016
本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程，并提供详细的说明。本文介绍了如何基于Vue3和Element-ui搭建一个后台管理系统框架模板。我们从创建Vue3项目、安装和配置Element-ui、封装Axios、创建路由、创建页面和创建菜单等方面进行了详细的讲解。希望本文能够帮助读者更好地理解Vue3和Element-ui的使用方法，以及如何构建后台管理系统框架模板。
Vue框架
m0_74741009的博客
12-03 607
Vue框架
vue+elementui完美实现博客、网站、个人网站，高仿“张凯博客”实现排版
热门推荐
lucky_fang的博客
09-10 1万+
1.本项目Demo实现灵感来源张凯博客，采用vue+elementui实现编码，最终效果图： 2.首先创建vue项目，采用开发工具Hbuilder。vue创建项目教程可参考：https://www.cnblogs.com/pyjblog/articles/14349370.html 3.创建项目后安装elementui，按照官方教程即可 创建好的项目目录结构大概这样子： 4.项目头部和底部在整个项目中是共用的状态，使用vue的router-view配合rou...
前后端分离框架Vue+Element UI（上集）
摸鱼打酱油的博客
02-26 8077
前后端分离框架Vue+Element UI（上集）
vue+elementUI 框架模板
05-06
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
vue + elementUI 项目搭建Demo
12-05
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont
基于vue + elementUI的管理系统模板
02-22
- **生命周期钩子**：Vue组件有自己的生命周期，提供了多个钩子函数，如beforeCreate、created、mounted等，方便在特定阶段进行逻辑处理。 - **计算属性与侦听器**：用于根据其他数据动态计算值，以及监听数据变化...
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
探索Vue-Blog：一款现代化的个人博客框架
gitblog_00085的博客
04-22 318
探索Vue-Blog：一款现代化的个人博客框架 项目地址:https://gitcode.com/treasureDouDou/vue-blog Vue-Blog 是一个基于 Vue.js 的开源博客系统，旨在提供一个轻量级、高效且易于定制的平台，让开发者能够快速搭建自己的个人博客。本文将深入探讨其技术特性、应用价值和独特优势，以期引导更多的用户加入到Vue-Blog的行列。 技术剖析 Vue-B...
Vue3与Element-plus整合及项目实战
最新发布
sinat_30844883的博客
05-14 3706
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
Vue整合ElementUI，组件使用教程，适合新手
m0_63174618的博客
04-12 1381
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！ckList)自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
vue+elementui搭建一个后台管理
05-29
好的，下面是一个简单的示例，供您参考： 1. 安装 Vue CLI ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目 ``` vue create my-project ``` 3. 安装 Element UI ``` npm i element-ui -S ``` 4. 引入 Element UI 在 `main.js` 中添加以下代码： ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 5. 创建一个后台管理页面 在 `src/views` 目录下创建一个新的文件夹，例如 `Dashboard`，然后在其中创建一个新的 Vue 组件，例如 `index.vue`。 6. 在后台管理页面中使用 Element UI 组件 例如，在 `Dashboard/index.vue` 中添加以下代码： ```html <template> <div> <el-row> <el-col :span="12"> <el-card> <p slot="header">Card 1</p> <p>Content of card</p> </el-card> </el-col> <el-col :span="12"> <el-card> <p slot="header">Card 2</p> <p>Content of card</p> </el-card> </el-col> </el-row> </div> </template> ``` 7. 添加路由 在 `src/router/index.js` 中添加以下代码： ```js import Vue from 'vue' import Router from 'vue-router' import Dashboard from '@/views/Dashboard/index.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Dashboard', component: Dashboard } ] }) ``` 8. 运行项目 在命令行中运行以下命令： ``` npm run serve ``` 以上是一个简单的示例，您可以根据自己的需求进行修改和扩展。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值