# project-architecture-vue3 **Repository Path**: vanwei/project-architecture-vue3 ## Basic Information - **Project Name**: project-architecture-vue3 - **Description**: 一个简单Vue3+Alova+Pinia+Typescript+Vue Router4的基座 - **Primary Language**: JavaScript - **License**: MPL-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-06-20 - **Last Updated**: 2025-04-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue3, TypeScript, Pinia, Mock, Alova ## README # project-architecture-vue3 由Vu3+Typescript+Pinia+vite+Vue DevTools Clien网页调试和管理 ``` my-advanced-vue3-project/ # 项目根目录 │ ├── public/ # 静态资源目录 │ ├── favicon.ico │ └── index.html # 项目入口HTML文件 │ ├── src/ # 源代码目录 │ ├── assets/ # 静态资源，如图片、字体等 │ │ ├── images/ │ │ ├── fonts/ │ │ └── ... │ │ │ ├── components/ # 通用组件库 │ │ ├── Base/ # 基础组件，如按钮、输入框等 │ │ │ ├── Button/ │ │ │ ├── Input/ │ │ │ └── ... │ │ ├── Advanced/ # 高级组件，如弹窗、轮播图等 │ │ │ ├── Modal/ │ │ │ ├── Carousel/ │ │ │ └── ... │ │ └── ... │ │ │ ├── views/ # 页面级组件 │ │ ├── Home/ # 首页相关组件 │ │ │ ├── Home.vue │ │ │ └── ... │ │ ├── About/ # 关于页面相关组件 │ │ │ ├── About.vue │ │ │ └── ... │ │ └── ... │ │ │ ├── router/ # 路由配置 │ │ ├── index.js # 路由主配置文件 │ │ └── routes/ # 路由分组配置 │ │ ├── HomeRoutes.js │ │ ├── AdminRoutes.js │ │ └── ... │ │ │ ├── store/ # Vuex 状态管理 │ │ ├── index.js # Vuex store 主文件 │ │ ├── modules/ # Vuex 模块 │ │ │ ├── user.js │ │ │ ├── cart.js │ │ │ └── ... │ │ └── getters.js # 全局getters │ │ │ ├── api/ # API接口请求 │ │ ├── axios.js # Axios 实例配置 │ │ ├── user.js # 用户相关API │ │ ├── product.js # 产品相关API │ │ └── ... │ │ │ ├── utils/ # 工具函数 │ │ ├── request.js # 封装请求函数 │ │ ├── dateUtils.js # 日期处理工具 │ │ └── ... │ │ │ ├── directives/ # 自定义指令 │ │ └── ... │ │ │ ├── filters/ # 自定义过滤器 │ │ └── ... │ │ │ ├── hooks/ # Vue Composition API 的自定义hooks │ │ └── ... │ │ │ ├── plugins/ # Vue 插件 │ │ ├── i18n.js # 国际化插件 │ │ ├── globalEventBus.js # 全局事件总线 │ │ └── ... │ │ │ ├── layouts/ # 页面布局组件 │ │ ├── DefaultLayout.vue │ │ ├── AdminLayout.vue │ │ └── ... │ │ │ ├── App.vue # 项目的根组件 │ ├── main.js # 项目的入口文件 │ └── ... │ ├── tests/ # 测试文件目录 │ ├── unit/ # 单元测试 │ ├── e2e/ # 端到端测试 │ └── ... │ ├── config/ # 项目配置目录 │ ├── index.js # 项目主配置文件 │ ├── env.js # 环境变量配置 │ └── ... │ ├── .env # 环境变量配置文件 ├── .env.local # 本地环境变量配置文件 ├── .eslintrc.js # ESLint 配置文件 ├── .prettierrc # Prettier 配置文件 ├── babel.config.js # Babel 配置文件 ├── jest.config.js # Jest 测试配置文件 ├── vue.config.js # Vue CLI 配置文件 ├── package.json # 项目依赖和 ``` ## localforage 是一个开源的JavaScript库，提供了跨浏览器、异步、简单易用的离线存储解决方案。它主要支持以下几个方面： ### 1. 多种存储后端支持 * **IndexedDB** ：localforage优先尝试使用IndexedDB进行数据存储，因为它提供了较大的存储空间、支持事务和异步操作，非常适合于Web应用中的复杂数据存储需求。 * **WebSQL** ：虽然WebSQL是一个较早的浏览器API，但由于其标准不统一和浏览器支持度低等问题，已被大多数现代浏览器弃用。然而，在IndexedDB不可用的情况下，localforage会尝试降级使用WebSQL（尽管这一降级路径可能在新版本的浏览器中不再有效）。 * **localStorage** ：当IndexedDB和WebSQL都不可用时，localforage会退而使用localStorage作为最后的存储方案。但需要注意的是，localStorage的存储空间有限，且所有数据都是同步存储的，可能会阻塞页面的渲染。 ### 2. 异步操作 * localforage的所有操作都是异步执行的，这可以避免在存储或检索大量数据时阻塞主线程，从而提高应用的性能和响应性。 ### 3. 支持各种数据类型 * 与localStorage只能存储字符串不同，localforage可以存储各种JavaScript数据类型，包括对象、数组、二进制数据等。这使得开发者可以更方便地在本地存储复杂的数据结构。 ### 4. 简单易用的API * localforage提供了类似于localStorage的API，使得开发者可以轻松地进行数据的读取、写入、更新和删除等操作。同时，它还支持Promise或回调函数等多种方式处理异步操作的结果，开发者可以根据自己的喜好和需求选择合适的方式。 在 `localforage`这个JavaScript库中，并没有直接通过 `localforage.INDEXEDDB`、`localforage.WEBSQL`、`localforage.LOCALSTORAGE`这样的属性或方法来明确指定使用哪种底层存储技术。`localforage`的设计初衷是提供一个简单且一致的API来在浏览器中存储数据，同时它会自动根据浏览器的支持情况来选择最佳的存储技术。 不过，我们可以解释 `localforage`如何与这些底层存储技术（IndexedDB、WebSQL、localStorage）进行交互： 1. **IndexedDB** ： * IndexedDB是一个低级的API，用于客户端存储大量结构化数据，包括文件和blobs。它提供了索引、事务、查询和版本控制等数据库功能。 * `localforage`在底层优先尝试使用IndexedDB进行数据存储，因为它提供了较大的存储空间、支持事务和异步操作，非常适合于Web应用中的复杂数据存储需求。 1. **WebSQL** ： * WebSQL是一个较早的浏览器API，它提供了一个类似于SQL的接口来操作数据库。然而，由于多种原因（如标准不统一、浏览器支持度低等），WebSQL已经被大多数现代浏览器弃用。 * `localforage`在IndexedDB不可用的情况下，会尝试降级使用WebSQL。但需要注意的是，由于WebSQL的弃用，这一降级路径可能在新版本的浏览器中不再有效。 1. **localStorage** ： * localStorage是一种简单的数据存储方式，它允许你在用户的浏览器中存储键值对数据。但是，它的存储空间有限（通常为5MB左右），且所有数据都是同步存储的，这可能会阻塞页面的渲染。 * 当IndexedDB和WebSQL都不可用时，`localforage`会退而使用localStorage作为最后的存储方案。 综上所述，`localforage`并没有直接通过属性或方法来指定使用哪种底层存储技术，而是通过其内部的优雅降级策略来自动选择。开发者在使用 `localforage`时，无需关心底层使用的是哪种存储技术，只需要使用 `localforage`提供的API来存储和检索数据即可。 此外，需要注意的是，`localforage`的API设计得类似于localStorage，提供了 `setItem`、`getItem`、`removeItem`等方法来存储、检索和删除数据。但是，与localStorage不同的是，`localforage`的所有操作都是异步的，这可以避免在存储大量数据时阻塞页面渲染。 ## Vu3全局方法配置 使用： import {getCurrentInstance,typeComponentInternalInstance} from'vue'; proxy?.$globaMylocalStorage ## 环境配置 切换环境的实现可参考：https://cn.vitejs.dev/guide/env-and-mode.html // "build": "run-p type-check \"build-only {@}\" --", .env.development 开发环境 .env.pre 预发环境 .env.production 生产环境 .env.test 测试环境 ## 主要技术栈 * `Vue3.4` * `Typescript` * `Vite4` * `Pinia` * `Vue-Router` * `Less` ## 主要插件 * alova 网络请求库 * `dayjs` 时间处理工具 * `vue-i18n` 国际化 * `lodash` 实用工具库 * `js-base64` Base64 加密解密工具 * `localforage` IndexedDB 数据存储库 * `jszip` Zip 压缩、解压工具 * `decimal.js` 高精度运算工具 * `pinyin-pro` 中文转拼音工具 * `vueuse` Vue 组合式 API 实用工具集 ## Recommended IDE Setup [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). ## Type Support for `.vue` Imports in TS TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. ## Customize configuration ## Project Setup ```sh pnpm install ``` ### Compile and Hot-Reload for Development ```sh pnpm dev ``` ### Type-Check, Compile and Minify for Production ```sh pnpm build ``` ### Lint with [ESLint](https://eslint.org/) ```sh pnpm lint ```