# uniapp+Vue3 + typescript + vite + pinia+ mock框架

**Repository Path**: tofireloli/cruelLoli-vue3

## Basic Information

- **Project Name**: uniapp+Vue3 + typescript + vite + pinia+ mock框架
- **Description**: 基于uniapp开发，项目框架采用vue3+uniapp+vite+ts+pinia+mock+多环境配置，以上功能全面支持app，h5，小程序，并且支持阿里iconfont快速导入，为中大型项目开发打下基础
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 2
- **Created**: 2023-07-17
- **Last Updated**: 2025-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, uni-app, TypeScript

## README

# 开发规范

### 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端运行

1. hbuilderX运行

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

2. 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端运行

1. 项目目录 `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
```

2. APP在手机上真机联调方法

   https://hx.dcloud.net.cn/Tutorial/App/PhoneDebugging

3. 常见问题解决方法

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

### 5、项目打包

##### 一、H5端打包

1. hbuilderX打包

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

2. cmd运行

``` 
npm run build
```

3. 打包文件位置

```
根目录/dist/build/h5
```

##### 二、 APP端发行

1. 发行 > 原生APP-云打包 -填写包名/证书/密钥等 > 快速安心打包

2. 等待云打包排队执行，并产生一个本地安装包


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


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

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

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

3. 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`调整

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

```javascript
<!-- 矢量图标 可自定义颜色 -->
<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`

```javascript
<!-- 多彩图标 -->
<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`，如之前已安装则跳过

```bash
npm install -g iconfont-tools
```

完成之后，在项目中执行

```bash
npm run icon
```

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

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

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