开发规范

1、推荐项目开发工具

项目运行工具hbuilderX
项目开发工具VS Code，支持eslint校验，推荐下载扩展工具（1）uni-ui-snippets： uni-ui 组件代码片段（2）uniapp-snippet： uniapp 代码提示（3）eslint，vetur，Vue3 Snippets等

2、项目组体框架

开发框架： vue3 + typescript + vite + pinia + mock
UI框架：uni-ui，文档及演示地址：https://uniui.dcloud.net.cn/
Uni-app API文档：https://uniapp.dcloud.io/api/
Ajax库官方文档：https://uniajax.ponjs.com/guide
px单位采用rpx，一屏宽度固定750rpx（px与rpx换算一般为1：2），字体大小采用px

3、安装使用

安装依赖
```
npm i 
```

4、项目运行

一、H5端运行

hbuilderX运行

运行 > 本地环境（mock环境）/联调环境/测试环境/生产环境
cmd运行

npm run serve // 本地环境
npm run serve:custom h5-dev // dev环境
npm run serve:custom h5-test-next // 测试环境
npm run serve:custom h5-uat // 生产环境

二、 APP端运行

项目目录 src/utils/app_env.ts 中，return 不同环境变量，APP端执行不同环境代码，在首页demo中可直接参考使用

// 测试环境
const testNext: EnvType = {
    NODE_ENV: '',
    VUE_APP_MODE: 'test-next',
    VUE_APP_URL: 'xxxx'
}
// 生产环境
const uat: EnvType = {
    NODE_ENV: '',
    VUE_APP_MODE: 'uat',
    VUE_APP_URL: 'xxxx'
}
// return不同环境变量，app端执行不同环境
return testNext

APP在手机上真机联调方法

https://hx.dcloud.net.cn/Tutorial/App/PhoneDebugging
常见问题解决方法

手机连接无反应，开启开发人员选项，开启usb调试
手机连接方式从充电模式改为文件传输模式
查看电脑是否存在adb通道被占用的情况，常见占用的软件如酷狗音乐等

5、项目打包

一、H5端打包

hbuilderX打包

发行 > 网站-PC Web或手机 H5
cmd运行

npm run build

打包文件位置

根目录/dist/build/h5

二、 APP端发行

发行 > 原生APP-云打包 -填写包名/证书/密钥等 > 快速安心打包
等待云打包排队执行，并产生一个本地安装包

6、项目目录结构

-dist // 打包文件
-mock/mocks // mock数据
-node_modules
-src
  -assets.css // 公共样式
  -components // 全局组件 u- || common- 开头的组件无需在业务中引入可直接使用
  -pages // 功能页面/组件
  -schema // 公共ts
  -static // 静态资源
  -store // vuex 每新增一个modules都要在index.d.ts中引入
  -uitls // 公共函数的储存位置
  -App.vue // 项目入口
  -manifest.json // uni配置文件
  -pages.json // router文件
  -uni.scss // 公共主题颜色
  -
-packages.json
-tsconfig.json
-vite.config.ts

接口请求格式（根据自身业务修改）

// 引入ajax
import $ajax from '@/utils/ajax'

// 例：查询接口 /captcha/code
const respData = await $ajax.get({url: '/captcha/code'})

mock数据

创建mock数据存放于mock/mocks下目录格式： mock/mocks/...接口路径.ts 如接口地址为：abc/cc/dd/ee 则路径为 mock/mocks/abc/cc/dd/ee.ts

export default () => {
  return {
    statusCode: 200,
    body: {
      code: 0,
      data: {
        accessToken: 'accessToken',
        refreshToken: 'refreshToken',
        userInfo: {
          name: '123',
          icon: 'icon'
        }
      },
      msg: '登录',
      success: true
    }
  }
}

8、页面结构

所有页面最外层需要用u-page包裹，已作用全局无需引入 (按业务需要来，我这边只是做了一个工共封装，用于多颜色切换，通用header等)

<template>
  <u-page class="page-first-page">
    // 主体内容
  </u-page>
</template>

<script lang="ts">
</scrpit>

<style lang="scss">
</style>

9、列表页面

本模板已集成 mescroll-uni，可直接在页面中使用

<u-page class="example-uRefresh" title="上滑加载">
    <u-refresh :url="dataMap.url" @upCallback="dataMap.upCallback" ref="mescrollItem">
      <template #data="{index}">
        <view class="detail">{{index}}</view>
      </template>
    </u-refresh>
  </u-page>

10 、阿里iconfont引入功能（支持多彩图标和单色图标）

1.2 项目中使用

图标分为单色图标和彩色图标，单色图片可任意更换颜色，并根据font-size配置图标大小，彩色模式不支持颜色变更，改变大小需配置width，height。

1.2.1 单色图标

单色图标即只有单一颜色，颜色可根据color任意修改，尺寸根据font-size调整

在图标图中点击font class模式，找到需要使用的图标并复制名称，如：icon-form-colse
在项目中使用仅需i标签，并配置class为 font_family icon-xxxx，即可显示

<!-- 矢量图标 可自定义颜色 -->
<i class="font_family icon-a-Login-Mobilenumber"></i>
<style>
	.icon-a-Login-Mobilenumber {
		font-size: 50px;
		color: blue;
	}
</style>

1.2.2 彩色模式

彩色图标即存在两种和两种以上颜色，颜色随源图标不可更换，尺寸根据 width，height 调整

使用：将icon名称前加上t-xxxx, 类似icon-a-Login-Mobilenumber改为t-icon-a-Login-Mobilenumber

<!-- 多彩图标 -->
<view class="t-icon t-icon-logo" style="width: 60px; height: 60px;"></view>
<style>
	.t-icon-logo {
		width: 60px;
		height: 60px;
	}
</style>

2. 数据引用及维护

全局安装iconfont-tools，如之前已安装则跳过

npm install -g iconfont-tools

完成之后，在项目中执行

npm run icon

输入iconfont地址 (iconfont数据源为fontclass地址) 复制加粗部分数据并填写到cmd中

at.alicdn.com/t/c/ font_3500651_l9b2nwed3zn .js

按提示填写信息（无需修改，采用默认即可），填写完毕后便完成图标的导入

残忍的小loli / uniapp+Vue3 + typescript + vite + pinia+ mock框架

开发规范

1、推荐项目开发工具

2、项目组体框架

3、安装使用

4、项目运行

一、H5端运行

二、 APP端运行

5、项目打包

一、H5端打包

二、 APP端发行

6、项目目录结构

8、页面结构

9、列表页面

10 、阿里iconfont引入功能（支持多彩图标和单色图标）

1.2 项目中使用

1.2.1 单色图标

1.2.2 彩色模式

2. 数据引用及维护

简介

发行版

贡献者

近期动态

残忍的小loli / uniapp+Vue3 + typescript + vite + pinia+ mock框架 .gitee-modal { width: 500px !important; }

开发规范

1、推荐项目开发工具

2、项目组体框架

3、安装使用

4、项目运行

一、H5端运行

二、 APP端运行

5、项目打包

一、H5端打包

二、 APP端发行

6、项目目录结构

8、页面结构

9、列表页面

10 、阿里iconfont引入功能（支持多彩图标和单色图标）

1.2 项目中使用

1.2.1 单色图标

1.2.2 彩色模式

2. 数据引用及维护

简介

发行版

贡献者

近期动态

搜索帮助

残忍的小loli / uniapp+Vue3 + typescript + vite + pinia+ mock框架