【源码】基于 Vue 3 和 ViteWebpack 的前端项目模板

项目简介

本项目是使用 Vite 和 Webpack 构建的 Vue 项目模板，集成了 2024 年 3 月最新的前端开发工具和库，提供可快速启动且高效开发的前端环境。

项目的主要特性和功能

技术框架

• 采用 Vue 3.x 版本，支持 Composition API，增强代码复用性与可维护性。
• 集成 TypeScript，实现静态类型检查，提升代码质量。

构建工具

可按需选择 Vite 或 Webpack 作为构建工具。

代码规范与格式化

• 用 ESLint 和 Stylelint 进行代码和样式规范检查。
• 借助 Prettier 实现代码格式化。

样式处理

• 支持 CSS 预处理器和 PostCSS，有更多样式处理能力。
• 集成 Tailwind CSS，具备丰富实用工具类。

自动化与便捷功能

• 支持自动导入 Vue 组件和 API，提高开发效率。
• 配置 Husky 和 lint-staged，自动化 Git 提交前的代码和样式检查。

状态管理与路由

• 用 Pinia 进行 Vue 3 的状态管理。
• 用 Vue Router 实现页面路由管理。

HTTP 请求

运用 Axios 进行基于 promise 的 HTTP 请求。

安装使用步骤

安装依赖

复制项目源码文件后，确保已安装 node18 或以上版本，在项目根目录运行 pnpm install 安装依赖。

启动开发服务器

• 使用 Vite 启动：运行 npm run dev。
• 使用 Webpack 启动：运行 npm run dev:webpack。

构建生产环境代码

• 使用 Webpack 构建：运行 npm run build。
• 使用 Vite 构建：运行 npm run build:vite。

其他脚本命令

• 分析打包大小：npm run anls。
• ESLint 检查 TypeScript 和 Vue 文件：npm run lint。
• Stylelint 检查 CSS/SCSS/Vue 文件中的样式：npm run lintcss。
• 提交前运行脚本：npm run precommit。
• 安装 Husky Git 钩子：npm run prepare。
• 预览生产环境构建：npm run preview。

下载地址

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