技术栈

vite2 + vue3 +es + vant3 + vue-router4 +pinia +axios

ps:会在稳定一个版本后将ES升级为TS

包管理工具

npm 

工具库

rem自适应布局：

      - amfe-flexible  修改根字体

      - postcss-pxtorem px自动转成rem

md5       加密

qs          数据序列话

lodash   常有js工具库

scss      css预处理语言

wx         微信开发SDK

\

框架运行说明

npm  install       安装依赖

npm run dev     运行项目

npm run test     打测试环境的包 （待开发）

npm run build    打正式环境包

npm run analyzer  依赖分析 （待开发）

\

 

项目结构

-dist     # 项目打包后目录

- public   # 通用资源，常用于存放不会被打包的外部库，很少使用

     - favicon.ico 网页标签小图标

-src

    -assets    # 静态资源文件

      -img       # 图片资源文件 分为通用icon目录和具体业务目录 防止图片过多导致的混乱

     -style      #  通用样式

        -base.scss  # 用来清除标签默认样式

        -global.scss # 通用全局样式，未来会按照设计规范进行封装

    -components    # 通用组件

       -WxOpenLabel.vue   # 微信开放开放标签组件

    -dataReportH5SDK     # H5埋点

    -httpConfig    # 请求工具类

         - api.js     # 具体业务接口配置文件

         - request.js  # 基于axios的Http请求封装

    - pages   # 页面目录

    - router    # 路由

    - stores    # pinia  全局状态管理机（内存中）

    - util         # 常用工具类

         - crypto.js           # 用于渠道加密

         - debounce.js     # 防抖

         - publicSDK.js    # 常用功能，后续将发布到npm上

         - encryption.js    # 请求加密算法

    App.vue   # 入口文件 可在此配置多语种，路由缓存

   main.js     # 通用组件按需引入，路由守卫

index.html

package-lock.json

package.json # 依赖说明

vite.config.js  # vite配置文件 代理服务器

.gitignore  # git配置文件 忽略不需要上传的目录

.prettierrc.json # 格式化工具配置文件，保证开发风格统一