Vue项目实战 ： Ant Design Pro大型开源项目构建 实践笔记(2)

最新推荐文章于 2025-10-17 09:47:11 发布
原创 最新推荐文章于 2025-10-17 09:47:11 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文主要介绍了在Vue项目中构建高扩展性路由的实践经验，包括解决全局引入导致的错误、实现路由懒加载以优化加载速度、设置页面重定向以及添加页面跳转进度条效果。通过这些技巧，可以提升项目的用户体验和性能。

设计一个高扩展性的路由

1. 坑点

在我的上一个ant-design-pro实战笔记中，记录我设置按需引入的过程，但是这次我又把App.vue的内容改回全局引入：在这里插入图片描述
这次运行在浏览器里报错：main.js?56d7:9 Uncaught ReferenceError: Antd is not defined

解决方法：改回按需引入

2. 路由懒加载（异步加载）方式引入组件在这里插入图片描述

具体阅读Vue官方文档：link.

3.页面
最低0.47元/天 解锁文章
Vue项目实战 ： Ant Design Pro大型开源项目构建 实践笔记(1)
林夏天的博客
02-01 3003
Vue.js项目实战1 ： Ant Design Pro大型开源项目构建实践 学习笔记 使用Vue CLI 3快速创建项目 / 自定义Webpack和Babel配置 1. 使用Vue CLI快速创建项目 选择自定义配置创建： 2. 坑点1 在创建完项目后，用VS Code打开项目，启动项目：npm run serve 在入口文件中引入组件: 在App.vue中更改： 重新启动项目...
FastAPI+Vue3零基础开发ERP系统项目实战课 20240815上课笔记 课程规划和项目环境搭建
源滚滚编程
08-15 1597
但是这个也有缺点，虽然下载速度很快，但是由于清华源是按照一定的时间间隔去pypi同步的，所以，pypi上最新的版本，清华源里面不一定能够及时的更新。清华源实际上做的事儿比较简单，就是清华大学维护了一个服务器，这个服务器将pypi官方仓库里面所有的东西都复制了一份到这个服务器上，其他并没有什么特别高级的东西。但是，清华源是在国内的，我们从清华源下载，下载速度会远大于从官方的pypi库下载的速度，所以一般来讲，我们都建议将pip的下载仓库，换成国内源。常量，字符串，列表，字典，元组，集合，分支，循环，函数。
ant-design-vue-pro-learn:ant-design-vue-pro开源项目学习代码
03-23
蚂蚁设计学习专业版 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 自定义配置 请参阅。
基于antdesign和vue的中后台管理框架
08-10
基于ant-design和vue的中后台管理框架
解析ant-design-vue-pro布局组件：ProLayout实现复杂中后台布局
最新发布
gitblog_00619的博客
10-17 650
在中后台系统开发中，布局设计往往直接影响用户体验与开发效率。ant-design-vue-pro作为企业级前端解决方案，其ProLayout组件通过灵活配置与组件化设计，完美解决了复杂布局需求。本文将从实际应用角度，详解如何利用ProLayout构建专业中后台界面。 ## ProLayout核心架构 ProLayout作为ant-design-vue-pro的布局基座，采用插槽化设计模式，将中...
Antd is not defined 解决办法
热门推荐
qq_39990827的博客
05-30 2万+
作者在配置完整导入之前，配置了按需导入，故而安装了 babel-plugin-import 插件，修改.babelrc文件，配置 babel-plugin-import { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%...
antdesign vue 2.0 递归菜单_【收藏】2019年最新Vue相关精品开源项目库汇总
weixin_39760721的博客
11-22 179
前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天（2019/01/19）重新更新了内容并新建项目awesome-vue​github.com针对原项目小肆做了如下几点更新更新全部项目github上的star数根据最新star数进行排序去掉所有star数不足1000...
阿里开源项目之Ant Design Pro
weixin_30273763的博客
12-03 512
本篇文章主要包含的内容有三个方面。 第一、Ant Design Pro简介; 第二、Ant Design Pro能做什么; 第三、初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意，同时也能通过小Demo提升学习信心。 一、Ant Design Pro简介 Ant Design Pro是一个开箱即用的中台前端/设计解决方案。 An...
AntAdmin:使用vue ant-design-vue编写的后台管理系统
03-11
使用vue + ant-design-vue开发的后台管理系统，部分组件使用Element-ui组件，目前只做主流浏览器兼容，遇到错误属于正常现象。 此项目只作练习，如若滥用请联系微信：UT77243我会第一时间删除整个项目 本项目由开发...
基于Vue.js和Ant Design的简易笔记客户端开发
资源摘要信息:"简笔记（easy notes）客户端是一款基于Vue.js和Ant Design开发的笔记应用。Vue.js是一个用于构建用户界面的渐进式JavaScript框架，而Ant Design是一套基于React的高质量企业级UI设计语言和React组件库...
Ant Design Vue 开源项目教程
gitblog_00005的博客
09-24 461
Ant Design Vue 开源项目教程 1. 项目介绍 Ant Design Vue 是一个基于 Ant Design 和 Vue.js 的企业级 UI 组件库。它提供了一套高质量的 Vue 组件，旨在帮助开发者快速构建桌面应用程序。Ant Design Vue 继承了 Ant Design 的设计理念，并针对 Vue.js 进行了优化，使得开发者可以轻松地在 Vue 项目中使用这些组件。 主...
vue 流程设计器.zip
09-11
vue 流程设计器,基于VUE+ElementUI+JsPlumb的流程设计器
flow-editor-vue:基于flowable绘图工具oryx的流程设计器
05-30
flow-editor-vue 安装 NPM npm i flow-editor-vue 运行示例代码 NPM npm run serve 说明 本项目examples文件夹中的示例代码，主要为测试API而写， 大家可以通过调到已抛出的API结合自定义UI实现更加美观和符合实际项目需求的界面。 最终功能及效果，由你来决定！ 如下是经过UI调整优化后的示例图：
vue-bpmn-element:bpmn.js流程设计器组件，基于vue-elementui美化属性面板，满足90％以上的业务需求
03-20
bpmn.js流程设计器组件 1、调整设计器UI布局，基于vue-elementui美化属性面板 2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求 3、支持flowable和activiti 组件常用方法 1，配置支持flowable（激活） < vue xss=removed></ vue> 2，组件还在完善中，如果有需要扩展需求，可以参考以下三个事件： // 监听选择事件，改变属性栏表单的显示与隐藏 this.modeler.on("selection.changed", e => { // TODO }) // 监听内容变化事件，改变属性栏的值 this.modeler.on("element.changed", e => { // TODO }) // 监听点击事件 this.modeler.on("el
Ant-design-vue开源项目介绍、应用场景、组件有哪些
日常笔记/总结/系列知识梳理
06-14 6564
Ant-design-vue 是一个基于 Ant Design 规范和 Vue.js 的企业级 UI 组件库。它旨在帮助开发者构建设计优雅、体验流畅的企业级应用。Ant-design-vue 是由 Ant Design 团队和 Vue.js 社区共同开发的。它结合了 Ant Design 的设计理念和 Vue.js 的技术栈优势，旨在为 Vue.js 开发者提供一套完整、易用、高质量的 UI 组件库。通过 Ant-design-vue，开发者可以更加高效、快速地构建出符合企业级应用需求的前端界面。
ant design vue 导航菜单怎么用_分享几个基于Vue的UI库和开源项目
weixin_39902608的博客
12-01 702
阅读本文大概需要 3.6 分钟。题图：Evan You(尤雨溪)的工作室在编程的世界里，你遇到的 90% 问题，别人都遇到过，并且提供了比较优秀的解决方案。我们无需一行一行代码从零开始创建一个项目，概括来说就是不要重复造轮子。那么从哪里发现好的轮子呢？这里我推荐 Github，Github 上有许多优秀的开源项目可供学习和使用，只需要我们自己去发掘这些优秀项目。本文推荐几个优秀的 Vue...
使用ant design Pro开发项目的小结
weixin_40362806的博客
04-18 874
一、关于上手。 1. 关于ant design Pro的介绍，自己看官网，大致上可以理解为ant design（组件库） + ant design Pro （完整的项目）+ dva（路由+数据流管理）的组合拳。总之这个Pro是一个已经帮你打通了从搭建到测试打包发布的一整套完整的项目，你只需要站在巨人的肩膀上开发就好了。 2. 按照官网安装好项目之后，就能看到几个页面
Flask+Vue+AntDesign开源框架推荐
一米阳光的博客
05-04 1237
一款 Python 语言基于Flask、Vue3.x、AntDesign、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值