xyhy移动端组件库

简介

h5移动端组件库-测试中

使用流程

pnpm i
pnpm dev
pnpm build

目录及文件说明

| 一级 | 二级 | 描述 | 文件说明 | | ----------- | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | .vscode | - | VSCode配置 | settings.json：VSCode编辑器设置extensions.json：推荐安装的扩展*.code-snippets：代码片段，初始提供Vue组件模板 | | public | - | 项目公共目录 | 存放静态资源，打包时将不会被处理 | | src | | | | | | api | 接口调用代码位置 | 存放Axios封装代码、接口调用代码 | | | assets | 资源目录 | 主要存放图片、svg图标 | | | common | 公共文件目录 | constant.ts： 全局常量文件 | | | components | 项目组件库 | 存放适用于当前项目的可复用组件 | | | composable | 组合式函数 | useVueI18n.ts：国际化组合式函数 | | | language | 国际化语言包 | en.json：英文语言包hi.json：印地语语言包index.ts：国际化实例创建zh-CN.json：中文语言包 | | | layout | 布局文件 | 页面布局相关文件，如主页的侧边栏+顶栏+内容区域布局 | | | router | 路由文件 | index.ts: 路由的处理，包括创建实例、增加路由守卫static.ts：静态路由文件 | | | store | 状态管理文件 | types目录：存放状态相关的ts类型定义auth.ts：示例文件，存放了用户信息、权鉴数据common.ts：全局状态存储位置，目前包含国际化转换函数config.ts：全局配置状态，目前持久化存储了当前语言index.ts：状态入口文件，创建实例并接入持久化插件 | | | style | 公共样式文件 | global.scss：全局样式变量文件index.scss：全局公共样式入口文件 | | | utils | 工具函数文件 | __test__目录：存放测试文件axios目录：存放Axios接口封装相关工具函数crypto：存放接口加密处理文件（复制旧版项目）progress.ts：进度条组件util.ts：全局通用工具函数文件 | | | views | 页面文件 | error目录：异常页面，例如404、500home目录：主页login目录：登录相关页面 | | types | - | TS定义文件 | global.d.ts：全局类型声明文件 | | 根目录 | - | .env.env.development.env.production.env.staging | Vite环境变量文件，见：https://cn.vitejs.dev/guide/env-and-mode.html | | | - | .gitignore | git的忽略版本控制文件列表 | | | - | index.html | Vue入口 HTML 文件 | | | | package.json | 项目配置文件，定义了项目基本信息、依赖项、脚本命令 | | | | pnpm-lock.yaml | pnpm依赖维护 | | | | README.md | 项目说明文档 | | | | tsconfig.json | TypeScript配置文件 | | | | vite.config.ts | Vite配置文件 |

相关功能说明

状态管理

1. 初始提供了用户信息&权鉴、全局状态、全局配置三个状态管理文件；
2. 使用pinia组合式语法，如有需要自行编写选项式语法的store文件；
3. Pinia持久化存储插件：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

样式

*由于项目可能存在开发一版后换肤的需求，因此开发前尽量合理使用全局变量与样式；

1. 提供全局变量global.scss文件，已通过vite进行配置，使用变量时使用命名空间g，样式文件和Vue组件均可使用，但是该文件仅用于存储全局变量，不要写入样式；

2. 提供index.scss作为全局样式文件；

动画

动画使用@vueuse/motion，官网见：https://motion.vueuse.org/getting-started/introduction

国际化

初始支持中、英、印三种语言，VANT也同步接入了这三种语言。

1. 国际化使用vue-i18n实现，在src/目录存放了语言包和i18n创建实例的代码；

2. 使用了VSCode的i18n Ally插件提供翻译文本预览、文件缺失提示、国际化数据总览等功能；

3. 在src/components/languageSwitch目录提供了语言切换组件；

4. 在src/store/common中提供了翻译函数t，便于在ts文件中也可以使用国际化功能；

图标库

使用开源图标库iconify（https://iconify.design/）；

初始默认安装了iconify的carbon库：https://icon-sets.iconify.design/carbon/

如需图标可以优先在carbon库中寻找，如果没有就安装对应库并导入对应图标

// 示例：安装iconify中的carbon库
pnpm add -D @iconify-icons/carbon

测试

使用vitest测试，在 “src/utils/_test_” 目录查看示例；