Advertisement

Vue3-Antd-Admin:基于 Vue CLI vite + Vue 3.0 + Ant Design Vue 2.0 + TypeScript 的项目...

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
Vue3-Antd-Admin是一个采用Vue CLI Vite、Vue 3.0及Ant Design Vue 2.0构建的现代化管理后台框架,支持TypeScript,提供高效开发体验。 这是一个基于 Vue CLI / Vite + Vue 3.0 + antd2.0 + TypeScript4.0 的后台管理系统模板。账号是 admin,密码为 123456。系统模块的数据是从先前获取的真实数据,并且路由也是从内部动态生成的。由于通过内网穿透提供访问时可能会遇到网络错误的问题,在进入页面提示网络错误的情况下需要刷新页面重新请求接口。 该系统使用了 Vue 3.0 全家桶,ant-design-vue2.0 和 TypeScript4.0 来实践 Vue 3.0 的新特性和玩法。Vue 3.0 的组合 API 相对于 Vue 2.0 的 Options API 更加灵活,使得我们可以更自由地组织组件逻辑,并且可以很方便地使用 hooks 替代以前的 mixins 等写法。 系统中实现了动态表格(扩展了伸缩列功能,并支持通过 JSON schema 配置生成表格)和满足基本需求的动态表单。后续计划进一步加强和完善这些功能。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • Vue3-Antd-Admin Vue CLI vite + Vue 3.0 + Ant Design Vue 2.0 + TypeScript ...
    优质
    Vue3-Antd-Admin是一个采用Vue CLI Vite、Vue 3.0及Ant Design Vue 2.0构建的现代化管理后台框架,支持TypeScript,提供高效开发体验。 这是一个基于 Vue CLI / Vite + Vue 3.0 + antd2.0 + TypeScript4.0 的后台管理系统模板。账号是 admin,密码为 123456。系统模块的数据是从先前获取的真实数据,并且路由也是从内部动态生成的。由于通过内网穿透提供访问时可能会遇到网络错误的问题,在进入页面提示网络错误的情况下需要刷新页面重新请求接口。 该系统使用了 Vue 3.0 全家桶,ant-design-vue2.0 和 TypeScript4.0 来实践 Vue 3.0 的新特性和玩法。Vue 3.0 的组合 API 相对于 Vue 2.0 的 Options API 更加灵活,使得我们可以更自由地组织组件逻辑,并且可以很方便地使用 hooks 替代以前的 mixins 等写法。 系统中实现了动态表格(扩展了伸缩列功能,并支持通过 JSON schema 配置生成表格)和满足基本需求的动态表单。后续计划进一步加强和完善这些功能。
  • Ant Design Vue 3 Admin: Vite 2 Vue 3 和 TypeScript 框架
    优质
    Ant Design Vue 3 Admin 是一个采用Vite 2构建工具,结合Vue 3和TypeScript的语言生态,旨在提供高效且可维护性的前端开发解决方案的框架项目。 ant-design-vue3-admin 是一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板,支持响应式布局,在 PC、平板和手机上均可使用。它采用了最新的技术栈,并提供统一的技术规范和权限方案(包括路由、菜单和操作)。此外,该系统还支持多语言功能以及数据 mock 功能,适用于不同设备的预览需求。相关文档提供了脚手架和一些通用部分的提取方法,方便单独使用。convue 是一个类似于 umi.js 的插件,基于 vite 开发;而 convue-lib 则包含了通用组件、样式及工具方法。
  • 使用 Vue-CLI/ViteVue 3.0Ant Design 2.0TypeScript 4.0 构建后台管理模板
    优质
    这是一款采用Vue-CLI或Vite搭建,结合Vue 3.0框架,运用Ant Design 2.0设计语言,并使用TypeScript 4.0开发的高效后台管理系统模板。 使用了Vue3.0全家桶、ant-design-vue2.0和typescript4.0,实践并应用了Vue3.0的新特性。
  • Vue-Antd-Admin::ant:在Vue中实现Ant Design Pro
    优质
    Vue-Antd-Admin是一款基于Vue框架和Ant Design的管理后台解决方案,致力于帮助开发者快速搭建美观且功能强大的企业级应用。 Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选 浏览器支持:现代浏览器及IE10及以上版本(如Edge、火狐Firefox、Chrome、苹果Safari等),最近2个主要版本均被支持。 使用克隆: ``` $ git clone https://github.com/iczer/vue-antd-admin ```
  • Vue 3 Element Plus TypeScript:使用 Vue CLI ViteVue 3.0 构建
    优质
    本项目采用Vue 3、Element Plus和TypeScript开发,利用Vue CLI结合Vite工具进行构建,提供高效稳定的前端应用框架。 基于vue-cli / vite + vue3.0 + element-plus + typescript + mock数据的后台管理系统列表页增删改查功能介绍: Vue-CLI版: Vite版: 系统模块的数据采用mock数据,使用了Vue3.0全家桶、Element-plus和typescript。实践了Vue3.0的新特性以及vite打包工具,并采用了vue3.0的组合API。体验到了vue3和typescript的特点,同时也利用了vite等页面功能。 列表页包括增删改查操作: 在项目中运用了vue3 composition api 和 typescript ,提供类型检查支持。 模拟数据用于测试接口返回的数据,使用typescript泛型来约束接口返回的数据格式。 通过yarn install进行编译和热重装以方便开发。
  • Vue3ViteTypeScriptAnt Design Vue及Pinia后台管理系统文件.zip
    优质
    本项目文件包含一个使用Vue3框架、Vite构建工具和TypeScript语言开发的现代化后台管理系统。系统采用Ant Design Vue组件库,并集成了状态管理库Pinia,提供高效且美观的用户界面与体验。 Vue3+Vite+TypeScript+Ant Design Vue+Pinia是构建高效、可维护的后台管理系统的现代前端开发组合。这些技术的优势使其成为此类项目中的理想选择,并提供了丰富的功能与优化的开发体验。 1. **Vue3**:作为最新版本,它带来了性能提升和更简洁的模板语法。Composition API允许开发者灵活地组织代码并复用组件逻辑,提高了可读性和维护性。此外,Suspense 组件可以处理异步加载问题,并使页面渲染更加平滑。 2. **Vite**:这是一个快速、现代的前端构建工具,具有热更新和快速启动的功能,在开发阶段极大地提升了效率。同时支持预渲染功能以提高生产环境中的加载速度。 3. **TypeScript**:作为JavaScript的一个超集,它提供了编译时类型检查来防止运行时错误,并有助于提高代码质量。在Vue3项目中与Composition API结合使用可以提供强大的类型推断能力,使组件状态管理更加安全可靠。 4. **Ant Design Vue**:这是一个基于Ant Design设计系统的Vue UI库,为开发者快速构建专业、美观的后台界面提供了丰富的组件和样式支持。这些精心设计且优化过的组件适用于各种业务场景,并易于定制。 5. **Pinia**:它是Vue3官方推荐的状态管理解决方案,替代了Vuex。它提供了一个更简洁易用的API以及更好的开发工具支持。通过将状态划分为不同的store来处理特定领域的问题,使得状态管理更加清晰和模块化。 6. **Keep-Alive组件**:这个功能用于在用户切换视图时保持组件的状态不变,从而避免重新渲染带来的性能开销。它特别适用于后台管理系统中需要保留表单数据等上下文信息的场景。 7. **Vite 自动路由生成工具**:该工具可以根据项目的文件结构自动配置路由,减少了手动维护的工作量,并简化了项目设置流程。 通过集成这些前沿技术栈,此后台管理系统的开发环境不仅高效而且稳定可靠。Vue3和TypeScript确保代码质量;Ant Design Vue加速界面设计过程;Pinia优化状态管理机制;Keep-Alive与Vite的自动路由特性则提升了用户体验。这一组合既适合新手学习实践也适用于大型企业级项目的复杂需求。
  • Vue-Antd-Admin Vue 3、Ant Design 和 JavaScript 后台管理系统
    优质
    Vue-Antd-Admin是一款采用Vue 3框架和Ant Design组件库构建的现代化JavaScript后台管理系统。它提供了简洁优雅的设计风格,丰富的功能模块及灵活可扩展性,适用于企业级应用开发需求。 欢迎使用vue-antd-admin!这是一个基于Vue 3.0、Ant Design Vue 2.0.0、Vuex 4.0以及Vue Router 4.0的项目,适合前端新手学习。该项目的所有后台代码都采用了Composition API编写方式。 作者刚从学校毕业不久,在探索和使用Vue 3的过程中不断尝试并遇到各种挑战。目前的目标是模仿vue-element-admin来创建一个通用化的后台管理系统,并且暂时采用模拟数据进行展示。未来可能会考虑重构为TypeScript版本的项目。 该项目支持以下功能: 1. 使用Composition API 2. 集成了Ant Design Vue 2.0.0版 3. 支持使用模拟数据 4. 支持嵌入式菜单 安装依赖的方式是通过运行`yarn install`。如果遇到Yarn无法正常安装的情况,请删除`yarn.lock`文件,然后执行 `npm install` 进行安装。 项目启动和构建命令为: - 使用命令 `yarn serve` 启动开发服务器 - 使用命令 `yarn build` 构建生产环境的代码
  • Electron-Vue-Vite:整合 Electron、Vue3、Vite2 和 ant-design-vue2
    优质
    本项目是基于Electron框架,结合Vue3和Vite2构建工具,并集成ant-design-vue2组件库,旨在提供一个高效开发桌面应用的解决方案。 electron-vue-vite:Electron + Vue3 + Vite2 + Ant-Design-Vue2 整合 已知问题: 项目打包后仍有问题,待解决... 暂时通过集成 webpack 解决打包问题。 How and Why: 这个 Demo 项目的目的是两个: 1. vue@3.x 已发布,想试试新功能; 2. 工作中使用的 umi+electron 项目启动速度较慢;用 vite 尝试一下,算一个储备方案 ^_^ 命令: ``` npm run dev npm run build ``` 如果只需要最基础的集成 Demo,请使用 或 分支。 Note 踩坑记:`import { write } from fs` 的这种形式会被 vite 编译成 `/@modules/fs?import`,而 `const { write } = require(fs)` 这种形式就能用了 :winking_face:
  • Ant Design Pro Vue模板:vue-antdesign-admin-template
    优质
    Vue-AntDesign-Admin-Template是基于Ant Design Pro的Vue.js企业级中后台前端解决方案,提供开箱即用的高质量UI组件和实用工具,助力开发者快速搭建功能丰富的管理应用。 蚂蚁设计专业Vue模板经过改造后提供了一个开箱即用的后台管理系统模板,优化了许多内容,使其更加轻量、简洁,并且可以在此基础上快速便捷地构建自己的后台项目。 预览: - 优化:改进了项目结构和文件夹命名,使项目结构更为合理。 - 优化:只保留基础实例路由和页面,删除了其他不必要的页面。 - 优化:顶部multiTab的样式进行了更新,可跟随header固定显示。 - 优化:升级至最新的2.x版本。 - 优化:打包配置可以根据不同的打包环境输出不同目录。 - 优化:多标签页快捷呼出菜单现在可以覆盖整个选项卡范围,并提供了两个切换效果供选择。 - 补充:增加了打包分析和快速lint-ifx命令的配置项 - 新增:提供了一些可用的less变量供使用 - 新增:新增了权限控制是否开启的相关配置