# 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 ```