%20(2).svg)
项目简介
本项目是一个基于Vue 3和Element Plus框架的项目模板，借助Vite作为前端开发工具，集成了Vue Composition API、Vue Router等常用技术栈。旨在简化前端开发流程，提升开发效率，具备路由系统、组件自动化加载、状态管理、布局系统、CSS引擎等丰富功能，同时支持国际化、API自动加载，还集成了单元测试、端到端测试以及可视化调试与预览等功能。
项目的主要特性和功能
- 基于Vue 3和Element Plus构建，拥有丰富组件库和UI样式。
- 采用Vite开发工具，支持快速开发迭代。
- 基于文件的路由系统，便于页面管理。
- 组件自动化加载，简化开发流程。
- 使用Pinia进行状态管理，方便应用状态维护。
- 布局系统，方便页面布局管理。
- 支持UnoCSS高性能即时原子化CSS引擎。
- 支持国际化，利于多语言应用开发。
- API自动加载，无需手动引入模块和组件。
- 提供单元测试和端到端测试功能，保障应用质量。
- 集成Storybook，便于可视化调试与预览组件。
安装使用步骤
开发环境准备
确保已安装Node.js和npm或pnpm包管理器，推荐使用pnpm进行依赖管理。
项目搭建与运行
- 下载本项目的源码文件。
- 在项目根目录执行
pnpm install命令安装依赖。 - 执行
pnpm dev命令启动本地开发服务器，访问http://localhost:3333查看项目运行效果。
项目使用说明
- 路径别名：
@/指向./src/文件夹，方便引用文件。 - 自动导入：自动处理模块和组件导入，无需手动操作。
- 路由系统：src/pages目录下的vue文件自动生成路由。
- 布局系统：可使用默认布局或指定自定义布局。
- 权限控制：包含页面级、菜单级和按钮级权限控制。
- 图标使用：使用@iconify/vue图标库，支持自定义图标配置。
- Mock数据：/mock目录下的文件自动生成mock数据，供本地开发使用。
- 组件预览：内置Storybook，在stories目录配置组件故事进行预览。
- 测试：在test目录配置单测脚本进行单元或端到端测试。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】