基于Vue + Antd 搭建自己的博客后台管理系统

最新推荐文章于 2023-03-24 20:04:25 发布
最新推荐文章于 2023-03-24 20:04:25 发布
阅读量8.7k 收藏 4
点赞数
文章标签： javascript 前端 markdown ViewUI
原文链接：https://juejin.im/post/5ca985e36fb9a05e526d9514
版权

博客后台管理

博客前台的项目地址: github.com/WqhForGitHu…

前言

博客后台管理是基于 Vue + Antd 实现的，Antd 确实是非常适合中后台应用的开发，有非常多的组件可以使用，非常多的组件可以使用。

技术栈

  • Vue
  • ant-design-vue: 基于 Vue 的 UI 库
  • fly: 异步请求库
  • vue-router: 前端路由
  • vuex: 管理应用数据
  • async/await: 处理异步请求接口

实现的功能

  • 博客的增删改查
  • 分类、标签的增删
  • 写博客

TODO

  • markdown在线编辑器

预览

登录界面

首页

修改博客

发布博客

标签管理

Build Setup

# 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

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
复制代码

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

转载于:https://juejin.im/post/5ca985e36fb9a05e526d9514

weixin_33860722
关注
Ant-Design-Vue快速上手指南+排坑
丁爸的博客
08-10 1335
Ant-Design-Vue 是一个功能强大、设计精良且易于使用的 Vue 组件库。通过遵循上述快速上手指南，你可以快速开始在项目中使用 Ant-Design-Vue，并构建出美观且功能强大的 Vue.js 应用。记得查阅官方文档以获取更多详细信息和高级用法。
基于ThinkPhp6+Vue+ElementUI低代码开发平台
西里古里的博客
02-23 8202
一款 PHP 语言基于ThinkPhp6、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
vue博客后台管理系统
07-09
vue和vue-router搭建的博客后台管理系统，实现了文章的展示，添加，修改，文件上传功能
基于antdesign和vue的中后台管理框架
08-10
基于ant-design和vue的中后台管理框架
Antd开发后台管理笔记一
well2049的博客
07-28 1562
Antd 开发后台管理第一次记录 通过create-react-app antd-admin 创建react项目 安装antd yarn add antd 设置antd 按需加载，需要安装依赖库：yarn add babel-plugin-import 安装状态管理工具redux和调试工具：yarn add redux react-redux redux-thunk redux-devto...
vue2+antd后台管理系统
hulover的博客
02-10 811
vue2+antd后台管理系统 码云连接： https://gitee.com/huminghui/vue-project.git
vue3+vite+antd 后台管理系统基础模板
02-06
这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速搭建后台管理系统的项目起点。它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env....
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
最新发布
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server directory cd server yarn start 运行...
vue3 +vite + antd Vue实现的后台管理系统
08-02
这些文件共同构成了一个基于 Vue3、Vite 和 Ant Design Vue 的后台管理系统的项目基础结构。通过这些配置，开发者可以快速搭建并开发出高效、规范的后台系统，同时享受到 Vue3 的强大功能和 Vite 的快速开发体验。
vue-antd-admin:vue-antd-admin基于vue-cli4 + vuex + ant-design-vue开发的后台管理系统，包括权限管理，布局方式，国际化，动态路由和后台管理系统常用的表格和表单等功能，包含echarts图的各种展示，第一版已完成，有兴趣可以了解下
03-11
·提出 ·提出 简介 是一个后台管理系统，基于 + 开发，包含动态路由+权限管理解决用户权限问题，提供基础固定权限：admin，test，editor和自定义用户权限，可自定义修改角色对应的菜单；布局方面提供左右布局和上下布局两种，可自由切换；系统内置了3套主题，可随意切换；还有一些后台管理系统常用的功能如表单，表表等； 测试账号 过一段时间后才发现忘记放测试账号和密码了，哈哈哈 1. 用户名：admin 密码 任意6位数 （如果你喜欢，可以用123456） 拥有admin的权限可以查看所有页面 2. 用户名：test 密码 任意6位数 （如果你喜欢，可以用123456） 拥有test的页面权限，可以查看部分页面 3. 用户名：editor 密码 任意6位数 （如果你喜欢，可以用123456） 拥有editor的页面权限，可以查看富文本等页面 4. 使用手机号验证码登录 ，默
vue-antd-element:基于vue3 + antd的后台管理系统
03-11
vue3-cli-tsx 基于vue3 + antd开发， “ vue”：“ ^ 3.0.0-beta.1”， “ vue-router”：“ ^ 4.0.0-alpha.6”， “ vuex”：“ ^ 4.0.0-alpha.1” 在线预览 进度 草稿版本 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue2 后台管理系统解决方案
weixin_34138377的博客
03-06 1148
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。 github地址：https://github.com/lin-xin/vue-manage-system demo地址：http://blog.gdfengshuo.com/example/work/ 前言 之前在公司用了Vue + Element组件...
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
热门推荐
皮皮的博客
05-26 1万+
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤： 一、Ant Design Pro of Vue 的介绍 Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 因为Ant Design Pro of V
Django+Vue+ElementUI管理后台源码
一米阳光的博客
03-15 998
一款 Python 语言基于Django、Vue2.x、ElementUI、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
安装 Ant Design Vue 后台框架
weixin_40817334的博客
08-30 771
1.安装apm 访问：https://nodejs.org/en/download/ 2.安装 vue 脚手架 npm install -g @vue/cli 3. 创建一个项目 vue create antd-demo 4.在当前目录下加载组件 npm i --save ant-design-vue@next
手写VUE后台管理系统4 - 整合UI框架AntDesignVue
死牛胖子的技术随笔
03-24 1707
从零开始手写VUE后台管理系统，整合UI框架ant-design-vue
Vue + json-server实现后台管理系统
weixin_33895695的博客
04-19 807
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3+antd+vite搭建后台项目
08-22
Vue3是一个流行的前端框架，具有高效的渲染和响应能力。antd是一个基于Vue的UI组件库，提供了丰富的组件和样式。Vite是一个新的打包工具，具有更快的启动和热更新速度。 搭建一个后台项目，可以使用以下步骤： 1. 安装Node.js和npm，确保全局安装了@vue/cli。 2. 使用命令行工具创建一个新的Vue3项目：vue create my-project。 3. 选择手动配置，并选择Babel，Router，CSS Pre-processors，ESLint和Linter / Formatter。 4. 安装antd：npm install ant-design-vue@next。 5. 在src/main.js中引入antd的样式和组件：import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; 6. 在创建应用程序之前使用Antd组件：const app = createApp(App); app.use(Antd); app.mount('#app'); 7. 使用vite创建一个新的项目文件夹：mkdir my-project && cd my-project。 8. 在项目文件夹中初始化npm：npm init -y。 9. 安装vite：npm install vite。 10. 创建vite配置文件：npx create-vite。 11. 安装其他依赖：npm install axios vuex。 12. 在src/main.js中引入antd的样式和组件：import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; 13. 在创建应用程序之前使用Antd组件：const app = createApp(App); app.use(Antd).use(router).use(store).mount('#app')。 14. 运行开发服务器：npm run dev。 这样，你就成功搭建了一个使用Vue3、antd和vite的后台项目。你可以根据项目需求进行开发，并根据需要引入和使用更多的antd组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值