【源码】基于 Vue 3 和 Vite 的模块化开发模板

项目简介

本项目是一个基于 Vue 3、Vite、Typescript 和 Volar 的模块化开发基础模板。支持 Vue 文件使用 <script setup> SFCs 语法，集成多种开发工具和插件，能帮助开发者快速搭建现代化前端项目，提升开发效率与代码质量。

项目的主要特性和功能

技术栈

1. Vue 3：运用新特性与 Composition API，提升代码组织与复用性。
2. Vite：具备快速开发服务器与模块热替换功能。
3. Typescript：进行静态类型检查，增强代码可读性与可维护性。
4. Volar：在 VSCode 中提供 Vue 3 最佳语法支持。

功能特性

1. 路由管理：使用 vue-router 管理页面路由。
2. 组件库：默认集成 element-plus 组件库，可替换为 ant-design-vue 等。
3. 自动导入：通过 unplugin-auto-import 和 unplugin-vue-components 插件实现全局自动隐式导入。
4. CSS 预处理：支持 Less 作为 CSS 预处理语言。
5. 模块可视化：利用 rollup-plugin-visualizer 生成模块占用比例，辅助分析代码结构。
6. 质量管理和工具：集成 husky、commitlint、lint-staged、prettier 等工具进行质量管理。

安装使用步骤

安装步骤

1. 复制项目：使用 git clone 或下载 zip 包获取项目源码。
2. 进入项目目录：cd vue3-template。
3. 安装依赖：npm install。

开发环境配置

项目已预配置基本开发环境，运行 npm run dev 启动开发服务器。

API 请求模拟

可在 src/index.ts 中开启或关闭 mock 模拟 XHR/Axios 请求。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】