搭建Vue版Ant Design Pro后台管理系统
搭建Vue版Ant Design Pro后台管理系统
此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端
相关文档链接
- 1、【Ant Design Pro of Vue 官方文档】
- 2、【Vue 官方文档】
- 3、【Vue Router 官方文档】
Ant Design Pro相关系列文章:
一、AntDesign Pro安装过程
二、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-前端部分
三、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-SpringBoot后端部分
四、搭建Vue版Ant Design Pro后台管理系统
五、基于Ant DesignPro Vue实现通过SpringBoot后台加载自定义菜单- 前后端分离
目录
- 搭建Vue版Ant Design Pro后台管理系统
- 一、准备
- 二、安装
- 1、从 GitHub 仓库中直接安装最新的脚手架代码
- 2、安装依赖
- 3、启动
- 三、验证
- 1、错误的用户名、密码
- 2、认证成功后首页
- 3、分析页
- 四、源码目录结构
- 1、源码目录结构说明
- 2、源码目录结构截图
一、准备
序号 | 组件名称 | 版本 | 说明 |
---|---|---|---|
1 | Git | 代码版本控件客户端 | |
2 | NodeJS | v16.17.0 | |
3 | Vue | 3.0 |
二、安装
1、从 GitHub 仓库中直接安装最新的脚手架代码
git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
cd my-project
2、安装依赖
yarn install
如果网络状况不佳,可以使用 cnpm 进行加速,并使用 cnpm 代替 yarn
或者设置 yarn 的 npm 加载源,如 yarn config set registry https://registry.npm.taobao.org
3、启动
yarn run serve
三、验证
登录http://localhost:8000
1、错误的用户名、密码
2、认证成功后首页
3、分析页
四、源码目录结构
1、源码目录结构说明
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置,包含路由,全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化,依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
│ └── global.less # 全局样式
├── tests # 测试工具
├── README.md
└── package.json
2、源码目录结构截图
搭建Vue版Ant Design Pro后台管理系统相关推荐
- 【前端】Ant Design Pro和Arco Design Pro非技术对比
最近公司要从Ant Design Pro和Arco Design Pro中选择一个作为中后台前端,非技术简单对比一下 stars数量 图片地址 中后台前端效果 Ant Design Pro Arco ...
- Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
- Ant Design Pro开发后台管理系统(新增页面)
通过实际demo演示一个管理后台的开发过程 知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表 其中 menuD ...
- 【Ant Design Pro 一】 环境搭建,创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
- Ant Design Pro 企业级后台实战(73 个视频)
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
- Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- ant design pro v4 从后台服务器请求菜单,思路,具体代码及坑
原文见:https://www.yuque.com/asuncat/htn2dd/wgnx0u 版本信息 ant design pro : v4.2.2 umi: v3.2.14 pro-layout ...
- ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标 在src/ ...
最新文章
- shell批量增删改查百库百表(mysql)
- saltstack的基础入门文档
- Memory and Trident
- Meteor环境安装配置
- 通讯中断 pc_S7程序RFID 与PC连接区别FB 65/UDT65
- c++与c语言的区别部分
- JVM学习笔记-03-类加载器及双亲委派机制
- 解决VM 与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard 后,可以运行 VM 的方法
- 作为程序员的我春节还没抢到票却抢到这玩意儿,也是值了!
- FastReport数据库连接路径及软件的最终分发数据库路径问题
- python连接mysql数据库简单例子
- java利用随机数简单发牌,!!!!!!!java新手求助,请教一个数组下标越界异常的问题...
- RLS实现求解最小二乘确定性正则方程
- 迁移学习—Geodesic Flow Kernel for Unsupervised Domain Adaptation
- mes系统服务器架构,MES系统-#网络架构图.pdf
- python语言就业方向_Python语言十大就业方向!老男孩教育
- 关于纹理勾选sRGB的疑惑
- H.264系列文章(三)——帧内预测
- git 的批量克隆 批量切换分支 批量pull
- Mybatis分页实现