# evaluate-h5

**Repository Path**: mei-you-bug/evaluate-h5

## Basic Information

- **Project Name**: evaluate-h5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-07
- **Last Updated**: 2025-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-uv-vue3

### 框架介绍

1. 该框架是用vite构建的uniapp框架其中集成uvui+unocss+pinia+typescript+luch-request
2.
uvui是基于uviewui2.x为vue3适配的uni-app组件库，适用于h5，小程序，app多端开发 [uv-ui官网](<https://www.uvui.cn/components/intro.html>)
3.
unocss是最新推出的原子化css引擎，[官方文档](<https://unocss.dev/integrations/cli>) ,[样式提示文档链接](<https://unocss.dev/interactive/>)
4. pinia是目前替换vuex的状态管理库，它是基于Vue 3的新特性Composition API开发的[pinia官网](<https://pinia.web3doc.top/>)
5.
typescript是一种开源的编程语言，它是JavaScript的一个超集。它添加了静态类型检查和更强大的面向对象编程特性，以提供更好的开发工具和更可靠的代码。TypeScript由微软开发和维护，并且与JavaScript高度兼容[ts官网](<https://ts.nodejs.cn/docs/>)。
6.
luch-request是一个基于Promise的、功能强大的HTTP请求库，专为小程序开发而设计。它提供了简洁的API和丰富的功能，使得在小程序中进行网络请求变得更加方便和高效。[luch-request官网](<https://www.quanzhan.co/luch-request/handbook/>)

---

### 环境准备介绍

1. **node版本18+**
2. **vue版本3+**

---

### 安装教程

1. **安装pnpm (npm install pnpm -g)**
2. pnpm i 安装依赖
3. 依赖更新 ncu -u
4. ### 目前uvui已经更新了npm安装方式，但是运行时会报错，提示mpShare导入路径有误，修改 `node_modules/@climblee/index.js` 内的 `import mpShare from '../../libs/mixin/mpShare.js'` 为 `import mpShare from './libs/mixin/mpShare.js'` 即可

---

### 使用说明

1. 在根目录下找到 <u>package.json</u> 的scripts部分,内容如下

```
   "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-jd": "uni -p mp-jd",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "type-check": "vue-tsc --noEmit"
```

以运行到小程序为例,我们需要执行 `npm run dev:mp-weixin`
然后手动打开微信开发者工具，导入项目对应生成的`dist/dev/mp-weinxin`即可

---

### 目录结构

> components: 组件目录

> hooks: 自定义hooks(类似vue2的mixin)存放全局方法
>  - useGetHeight 获取屏幕高度
>  - useLoadMore 全局滚动加载
>  - useSendCode 发送验证码

> pages: 页面目录


> store: pinia状态管理目录
> > modules: 各个状态管理模块
> > > - app: 目前用于处理接口计数
> > > - auth: 用于处理用户登录，注册，更新，用户信息等逻辑
> > > - setting: 用于处理获取全局设置逻辑


> services: 接口目录
> > api: 接口目录
> > > - auth: 用户相关接口
> > > - common: 全局配置相关接口
>
> > request: 请求封装目录 ,**由于采用luch-request替代uni.request，对应封装了拦截器，请求配置等**
> > - config: 用于配置请求环境等
> > - instance: 拦截器的配置
> > - request: 自定义的请求对象，**拥有<u>普通请求</u>和<u>静默请求</u>两种方式**

> utils: 工具目录
> - commons: 预先封装了类似toast,modal确认框等常用api
> - utils: 工具类，存放类似时间转换，图片预览等方法

> typings: 类型目录,用于声明全局ts对象

> uni_modules: 目前存放uvui组件库
> > load-more: 滚动加载组件

---

### unocss 配置项

unocss.config.ts内

```javascript

export default defineConfig({
    presets: [
        // @ts-ignore 
        presetWeapp({
            prefix: 'g-' // 设置代码样式的前缀
        }),
    ],
    rules: [ // 自定义的class
        ['g-nowrap', {'white-space': 'nowrap'}]
    ],
    shortcuts: [ // 自定义的class 组合使用
        {
            'g-flex-center': 'g-flex g-justify-center g-items-center',
        },
    ],
})
```

页面内快捷class使用

`<div class="g-p-30px"></div>`
其中 **g-** 为自定义的前缀，**p** 为padding的简写，**30px** 为值,前缀可以自行修改，目的是不和其他组件库的class冲突
---

### uvui组件库使用

因为组件已经在uni_modules内，所以直接使用即可，无需导入

```html

<template>
    <view class="g-p-30rpx">
        <uv-button type="primary" text="确定"></uv-button>
        <uv-button type="primary" :plain="true" text="镂空"></uv-button>
        <uv-button type="primary" :plain="true" :hairline="true" text="细边"></uv-button>
        <uv-button type="primary" :disabled="disabled" text="禁用"></uv-button>
        <uv-button type="primary" loading loadingText="加载中"></uv-button>
        <uv-button type="primary" icon="map" text="图标按钮"></uv-button>
        <uv-button type="primary" shape="circle" text="按钮形状"></uv-button>
        <uv-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
        <uv-button type="primary" size="small" text="大小尺寸"></uv-button>
    </view>
</template>
```

---

### 接口使用

```javascript
import {request, silentRequest} from "../request"

/**
 * 登录
 * @param data
 */
export const login = (data: object) => request.post("login", data)

/**
 * 获取用户信息
 */
export const getUser = () => silentRequest.get("user/getUser")

```

1. 接口封装了静默请求和普通请求，根据实际开发需求使用
2. 静默请求不会触发loading，不会触发错误提示，适用于登录，注册等接口

---

### uniapp声明周期调用

需要先导入对应要使用的生命周期,再对应调用

```javascript
import {onLoad, onShow, onUnload, onReady, onReachBottom} from "@dcloudio/uni-app";

onLoad(() => {
    console.log("onLoad")
})

onShow(() => {
    console.log("onShow")
})

```

---

### pinia状态管理简单使用

```javascript
// testStore.ts
import {defineStore} from "pinia"

export const testStore = defineStore("test", {
    state: () => ({
        // state相当于vue2中的data(){return {}}
        test: 1
    }),
    getters: {
        // getters相当于vue2中的computed:{}
    },
    actions: {
        // actions相当于vue2中的methods:{}
        doTest() {
            console.logs(this.test)
        }
    }
})

// 在index.vue页面内调用
import {useTestStore} from "@/store"

const testStore = useTestStore()

testStore.doTest()

```

---