【源码】基于 Vue 框架的前端通用项目

项目简介

本项目是基于 Vue 框架构建的前端通用项目，具备清晰的目录结构与严格的编码规范。集成了请求封装、路由管理、状态管理、本地持久化缓存等功能，同时支持神策埋点，适用于各类前端项目开发。

项目的主要特性和功能

1. 模块化设计：将不同功能模块分开存放，如 api、components、plugin 等，便于管理和维护。
2. 请求缓存：请求封装中，请求成功后的内容默认在 vuex 缓存 500 毫秒，减少重复请求。
3. 自动路由生成：路由封装可对 views 文件夹中的文件自动生成路由。
4. 状态管理：支持在 store 文件夹下创建状态管理 js 文件，自动挂载到 store 中。
5. 本地持久化缓存：使用 localforage 实现本地持久化缓存，并可挂载 store 模块。
6. 神策埋点：集成神策埋点功能，方便进行数据分析。
7. Vant 组件封装：对 Vant 组件进行封装，可自定义组件和主题样式。

安装使用步骤

安装依赖

在项目根目录下运行以下命令安装所需依赖： bash npm install

启动开发环境

依赖安装完成后，运行以下命令启动开发环境： bash npm run dev

代码规范

• 文件名与变量名使用小驼峰命名。
• 禁止使用 var，优先使用 const；禁止使用 == 和 !=，使用 ===。
• 除最外层布局外，所有高度使用边距撑起，遵循设计规范。
• Vant 的主题样式需在 plugin/vant/vant.less 中定义。
• API 调用时，方法名称前加入接口文件名，如 this.$api.userGetToken()。
• 每个 vue 文件的 export default 中，可通过 meta 定义路由信息，如 title 为页面标题。
• 禁止使用 mixin，如需继承可考虑使用高阶组件。
• 避免在 App.vue 与 main.js 入口文件中写入过多逻辑，判断逻辑可写在 router 文件夹下的 beforeEach.js 文件中。
• 如需使用持久化缓存，需在 store 中使用，具体使用方式参考 store 文件夹下的 user 缓存 token。
• 条件语句尽量使用多个独立的 if 语句，增强可读性与扩展性。

下载地址

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