Advertisement

基于 Vite 5.x、Vue 3.x 和 Arco Design 2.x 的全新前端框架 Vue-Admin-Arco

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


简介:
简介:Vue-Admin-Arco 是一个采用 Vite 5.x、Vue 3.x 和 Arco Design 2.x 构建的现代化前端框架,提供高效开发工具与组件库,助力开发者构建高质量企业级应用。 对比其他开源 admin 框架的优势如下: 1. 支持前端控制路由权限 intelligence 和后端控制路由权限 all 模式。 2. 在已知的 vue admin 开源框架中,首家支持 mock 自动生成并自动导出功能。 3. 提供超过 50 项全局精细化配置选项。 4. 支持 scss 自动排序以及 eslint 的自动修复功能。 5. 对 axios 进行了细致封装,支持多数据源和多种成功 code 数组。同时兼容 application/json;charset=UTF-8 和 application/x-www-form-urlencoded;charset=UTF-8 等多种传参方式。 6. 支持登录时使用 RSA 加密技术。 7. 打包完成后可自动生成 7Z 压缩文件。 8. 提供 errorlog 错误拦截功能,便于调试和维护。 9. 具备多主题及布局切换的能力。 使用本项目需要注意以下几点: 1. 默认采用 lf 换行符而非 crlf 换行符,在创建新文件时请确保选择正确的换行格式。 2. 使用了最严格的 eslint 规范(plugin:vuerecommended),建议配置开发工具实现自动修复。推荐在 vscode 中进行开发工作。 3. 项目采用 MIT 开源许可协议,这是允许范围内的宽松授权方式。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • Vite 5.xVue 3.x Arco Design 2.x Vue-Admin-Arco
    优质
    简介:Vue-Admin-Arco 是一个采用 Vite 5.x、Vue 3.x 和 Arco Design 2.x 构建的现代化前端框架,提供高效开发工具与组件库,助力开发者构建高质量企业级应用。 对比其他开源 admin 框架的优势如下: 1. 支持前端控制路由权限 intelligence 和后端控制路由权限 all 模式。 2. 在已知的 vue admin 开源框架中,首家支持 mock 自动生成并自动导出功能。 3. 提供超过 50 项全局精细化配置选项。 4. 支持 scss 自动排序以及 eslint 的自动修复功能。 5. 对 axios 进行了细致封装,支持多数据源和多种成功 code 数组。同时兼容 application/json;charset=UTF-8 和 application/x-www-form-urlencoded;charset=UTF-8 等多种传参方式。 6. 支持登录时使用 RSA 加密技术。 7. 打包完成后可自动生成 7Z 压缩文件。 8. 提供 errorlog 错误拦截功能,便于调试和维护。 9. 具备多主题及布局切换的能力。 使用本项目需要注意以下几点: 1. 默认采用 lf 换行符而非 crlf 换行符,在创建新文件时请确保选择正确的换行格式。 2. 使用了最严格的 eslint 规范(plugin:vuerecommended),建议配置开发工具实现自动修复。推荐在 vscode 中进行开发工作。 3. 项目采用 MIT 开源许可协议,这是允许范围内的宽松授权方式。
  • 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 则包含了通用组件、样式及工具方法。
  • X-admin v2.2
    优质
    X-admin v2.2是一款功能强大的前端框架,专为开发高效、美观的Web应用程序设计。它提供了丰富的UI组件和灵活的布局选项,帮助开发者快速构建响应式界面。 **X-admin v2.2 前端框架详解** X-admin是一个基于layui的高效、轻量级前端后台管理框架,旨在为各种层次的开发者提供便捷的WEB应用开发方案,并确保良好的兼容性,适用于快速构建企业级应用。自2017年起,由于其简单易用和免费开源的特点,逐渐受到广大开发者的青睐。 ### layui框架介绍 layui是中文社区推出的一款优秀的前端UI框架,遵循MIT协议,提供了丰富的组件和模块,涵盖了页面布局、表单、表格、按钮、弹窗等常见功能。它具有高度可定制性和良好的响应式设计,能够适应不同设备的显示需求。其设计理念为简洁实用,旨在提升开发效率并降低项目维护成本。 ### X-admin v2.2特性 1. **轻量级**:X-admin在保持全面功能的同时体积小巧,减少了加载时间,提升了用户体验。 2. **免费开源**:遵循Apache 2.0协议,允许自由使用、修改和分发。开发者可以根据自身需求进行定制化开发。 3. **良好的兼容性**:支持多种主流浏览器,包括IE8以上版本,满足不同用户群体的需求。 4. **面向所有层次的开发者**:无论是初学者还是经验丰富的程序员都能快速上手,并利用X-admin搭建后台管理系统。 5. **模块化设计**:采用模块化开发方式使得代码结构清晰、易于维护和扩展。 6. **丰富的组件**:内置了面包屑导航、侧边栏、多级菜单及图标库等多种实用组件,满足后台管理界面的常见需求。 7. **API友好**:提供了详细的文档与示例代码方便开发者理解和使用。 ### 使用X-admin v2.2步骤 1. **下载与引入**:从官方网站或GitHub仓库获取X-admin v2.2压缩包,解压后将CSS、JS及图片等资源加入到项目中。 2. **页面结构规划**:根据后台管理需求规划页面基本结构如头部、侧边栏和主要内容区域。 3. **配置菜单**:利用多级菜单功能设置系统权限与功能菜单。 4. **添加组件**:依据功能需求选择合适的layui或X-admin扩展组件进行页面元素的添加及配置。 5. **编写业务逻辑**:结合后端接口实现数据增删改查等操作完成具体业务逻辑。 6. **测试与优化**:对系统进行全面测试确保各项功能正常工作,并针对性能和用户体验做进一步优化。 ### 实例应用 - 用户管理:使用表格组件展示用户列表,通过表单组件实现信息编辑及新增; - 角色分配:利用多选框和下拉菜单支持批量操作以完成角色权限配置; - 日志监控:集成日志查询功能通过时间轴方便管理员查看与分析系统操作记录。 ### 持续更新与社区支持 X-admin项目团队持续维护并更新框架,解决用户反馈的问题,并在官方论坛及社区提供技术支持帮助开发者解决问题促进共同成长。 总结来说,X-admin v2.2是一款高效易用的前端后台管理框架充分利用layui的优势为开发人员带来快捷高效的开发体验。无论个人还是企业团队都可以考虑将X-admin纳入项目中以提升效率并打造高质量的后台管理系统。
  • Gin + Vue + Element UI & Arco Design & Ant Design go-admin.zip
    优质
    go-admin是一款集成了Gin、Vue以及Element UI、Arco Design和Ant Design等前端框架的技术栈解决方案,适用于快速开发Go语言后端应用。 go-admin 是一个基于 Gin + Vue + Element UI 与 Arco Design & Ant Design 的开源后台管理系统框架。它提供了丰富的功能模块和灵活的配置选项,适用于快速开发企业级后端服务及前端应用。通过使用 go-admin,开发者可以轻松构建高效、美观且易于维护的管理界面,并利用其强大的插件生态进一步扩展系统功能。
  • Vue-Admin-Templage:Element-Vue-Admin改进Vue开发
    优质
    Vue-Admin-Template是一款基于Element UI和Vue.js的现代化前端开发框架,旨在为开发者提供一个高效、灵活且易于定制的基础平台,适用于快速构建企业级应用。 构建设置 进入项目目录: ``` cd vue-admin-template ``` 安装依赖: ``` npm install ``` 建议不要直接使用 cnpm 安装依赖项,因为可能会遇到各种奇怪的问题。可以通过以下操作解决 npm 下载速度慢的问题: ``` npm install --registry=https://registry.npm.taobao.org ``` 启动服务: ``` npm run dev ``` 浏览器访问发布 构建测试环境: ``` npm run build:stage ``` 构建生产环境: ``` npm run build:prod ``` 其他操作: 预览发布环境效果: ``` npm run preview ``` 预览发布环境效果并进行静态资源分析: ``` npm run preview -- --report ``` 代码格式检查: ``` npm run lint ``` 代码格式检查并自动修复: ``` npm run lint -- --fix ```
  • Vue 3.x中应用Cesium:Vue 3.x + Cesium
    优质
    本教程详细讲解如何在Vue 3.x框架中集成和使用Cesium地球三维引擎,帮助开发者轻松构建高性能地理信息系统。 在使用Vue 3.x版本并集成Cesium时,可以通过vue-cli创建项目,并手动配置webpack。完成资源配置后,下载所需文件,在项目目录下执行`npm install`安装依赖项即可运行项目。
  • Vue-Vben-Admin:采用Vite2、Vue3.0、Ant-Design-Vue 2.x、TypeScript、Vuex及Vue Router等技术构建
    优质
    Vue-Vben-Admin是一款基于现代前端技术栈开发的管理后台系统,采用了Vite2和Vue3.0作为项目启动与视图渲染的核心引擎,并结合Ant-Design-Vue 2.x提供美观且易用的界面组件。此外,它利用TypeScript提升代码质量,借助Vuex进行状态管理和通过Vue Router实现页面路由控制,从而为开发者提供了高效、灵活的开发体验。 Vue Vben Admin是一个免费的开源前端与后端模板。它使用了最新的 Vue3 和 vite2 技术,并采用了 TypeScript 等主流技术开发,开箱即用的解决方案可供学习参考。 特点: - 使用最新技术水平:采用如 Vue3、vite2 的前端技术 - TypeScript :应用程序级JavaScript语言 - 主题:可配置的主题系统 - 国际化:内置完整的国际化程序 - 模拟服务器:内置模拟数据方案 - 权限管理:内置的动态路由权限生成解决方案。 - 组件封装:多个常用组件被二次封装 演示: 完整版中文网站和github站点提供了项目展示。 测试账号为 vben,密码 123456。 使用Gitpod可以在在线开发环境中打开项目并立即开始编码。
  • Vue-Vben-Admin:采用Vite2、Vue3.0及Ant-Design-Vue 2.x构建Vue3管理后台...
    优质
    Vue-Vben-Admin是一款基于Vite2和Vue3.0框架,并结合了Ant-Design-Vue 2.x组件库,专为开发高性能、易维护的Vue3管理后台系统而设计的解决方案。 VUE VBEN ADMIN 2.0 is a backend management system based on Ant Design-Vue, implementing Vue 3 style. The project uses vue 3.0 and TypeScript (tsx). Documentation for version 2.0 has not yet been started but will be provided in the future. Pre-installation environment requirements: - Node.js: Version > 12.0.0 - Yarn: Package management tool UI framework - Removed. Icons - Icons are imported on demand and can be used during build processes. Injection - Vuex modular setup. Mocking plugin based on Vite for mock data generation. Internationalization implemented in JavaScript.
  • Vue3.x+Vite+TS+Vue-Router@4.x路由示例代码
    优质
    本项目提供了一个使用Vue 3.x、Vite和TypeScript开发环境下的Vue Router 4.x版本的基本路由配置与实现案例,适合初学者快速上手。 Vue3.x 是 Vue.js 框架的最新版本,它带来了许多优化和改进,包括更好的性能、更简洁的 API 和 Composition API。Vite 是由 Vue.js 作者尤雨溪开发的一种新型前端构建工具,利用了 ES 模块的原生导入功能,实现了更快的热更新和开发体验。TypeScript(简称TS)是一种强类型、静态类型的编程语言,在 JavaScript 的基础上增加了许多特性,提高了代码的可维护性和安全性。 Vue Router 是 Vue.js 官方的路由管理器,版本4.x 与 Vue3.x 兼容。它负责处理应用的导航和页面间的通信,使得单页应用(SPA)能够根据 URL 进行状态管理和页面切换。 在这个使用 vue3.x、vite 和 TypeScript 的项目中,并结合 Vue Router@4.x 路由配置,我们可以学习到以下关键知识点: 1. **Vue3 Composition API**:Vue3 引入了 Composition API,允许开发者将逻辑组件化,提高了代码的复用性和组织性。在路由配置中,可以利用 setup() 函数和 ref、reactive 等工具来管理状态和响应式数据。 2. **Vite 的配置与使用**:Vite 使用 ES 模块的动态导入功能,大大减少了项目的初始加载时间。通过 vite.config.js 文件可定制化构建设置,如公共路径、CSS 预处理器、插件配置等。 3. **TypeScript 集成**:Vue3.x 支持 TypeScript,在定义组件时声明类型可以提供编译时的错误检查功能。使用 TypeScript 对 Vue Router 的配置进行类型检查,增强代码的可读性和可靠性。 4. **Vue Router 4.x**:在 Vue Router 4.x 中,主要涉及 `createRouter` 和 `createWebHistory` 方法来定义路由。路由设置包括 path、component、props 等选项,并且可以使用 `router-link` 和 `router-view` 组件创建链接和渲染视图。 5. **路由懒加载**:Vue Router 支持通过动态导入组件实现按需加载,减小首屏加载体积。例如,可以通过 import() 动态导入组件的方式实现这一功能。 6. **命名视图与嵌套路由**:复杂应用可以使用命名视图来创建并列的多个视图或利用子路由进行布局嵌套。 7. **动态路由匹配**:通过冒号 `:` 定义动态段,实现在参数基础上的路由跳转。在组件内部,可以通过 route.params 访问这些参数。 8. **导航守卫**:Vue Router 提供了多种类型的导航守卫,包括全局前置守卫、组件内守卫和路线独享守卫,在导航发生时可以执行条件判断或异步操作等任务。 9. **路由元信息(meta)**:为每个路由定义 meta 字段来传递非状态信息,例如页面标题。这在权限控制和设置页面标题等方面非常有用。 10. **重定向与别名**:通过配置可以让用户访问特定的路由时自动跳转到其他路径;同时也可以为一个路由设置多个访问路径(即使用别名)。 以上内容展示了如何在一个 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x,这将极大提升你的前端开发技能。通过实际项目练习也能更好地理解和掌握这些技术的实际应用。
  • Vue-Admin:简洁Vue后台管理模板(现已支持Vue 3.x
    优质
    Vue-Admin是一款专为开发者设计的简洁高效Vue.js后台管理系统模板,现全面兼容Vue 3.x版本,助力快速构建现代化Web应用。 Vue后台管理模板项目描述:基于 Vue.js + TypeScript + Element-UI 编写了一套超轻量且可根据实际情况自由扩展的前端中后台管理基础模板。 技术栈: - Vue 2.x 主要功能模块包括: 1. **Layout核心** - 提供了基本的布局模板。 2. **vue-router用户权限管理** - 实现路由级别的权限控制。 3. **svg-icon组件配置** - 方便管理和使用SVG图标资源。 4. **http请求功能模块配置** - 我采用的是原生Ajax,但可以根据个人喜好扩展第三方库如axios等。 状态管理方面: - 未使用Vuex,而是采用了更适合TypeScript的设计模式。参考大写字母开头的文件中的初始化类来实现相关功能。 为了保持模板轻量级,像图表、富文本编辑和Excel等功能可根据项目需求选择合适的组件进行导入和使用。本基础框架仅提供核心部分的功能支持,并且在分支中包含一些个人使用的扩展模块如wangEditor等。