Vue3 + TS + Vite + Unicloud

1、Vue3 项目

选择 Vue3、Typescript 项目

npm create vite@latest

1.1、安装依赖

安装axios以及TS声明
安装unicloud相关的插件

npm i axios
npm i @types/axios
npm i @dcloudio/uni-app-plus
npm i @dcloudio/uni-cli-shared

1.2、创建 Api

api/common.ts 用来封装 axios
api/userApi/index.ts 用来管理用户相关 api

• 封装 axios

// api/commom.ts
import axios from 'axios';
// 替换为你的UniCloud云函数域名，在云函数详情中找到
const baseURL = 'https://fc-mp-01f12cd0-83c0-4771-88a9-18830bc95a23.next.bspapp.com'; 

const instance = axios.create({
    baseURL,
    timeout: 10000,
});

const callUniCloudFunction = async (path: string, data: object = {}) => {
    try {
        const response = await instance.post(path, data);
        return response.data;
    } catch (error) {
        console.error('调用UniCloud接口失败:', error);
        throw error;
    }
};
export default callUniCloudFunction

• 管理 Api

// api/userApi/index.ts
import callUniCloudFunction from "../common";

const URL_Add = '/userAdd' // 这里是具体path，在云函数详情中设置
const URL_Move = '/userMove'

export function userAdd(param: object = {}) {
    return callUniCloudFunction(URL_Add, param)
}

export function userMove(param: string | string[]) {
    return callUniCloudFunction(URL_Move, {
        delete: param
    })
}

1.3、调用 Api

import { userAdd, userMove } from '../api/userApi'
import type { ResponseInterface } from '../interface'

setTimeout(() => {
    userAdd({
        name: '刘邦',
        age: 26
    }).then((res: ResponseInterface) => {
        console.log(res);
    })
})

2、uniapp 项目

1. 创建uniapp项目
2. 关联uniCloud空间
3. 同不云函数、云对象
4. 新建云函数
5. 上传云函数
6. 打开云函数列表
7. 编辑云函数
   7.1. 云函数URL化
   7.2. 编辑，path