npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

# 如果下载失败 可以尝试清除缓存 和更新 npm 版本
npm cache clean --force
npm install -g npm@latest

cd 项目目录
npm install

npm run dev:mp-weixin

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext","dom"],
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block","component","template","slot"],
  },
  "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]
}

<script setup lang="ts">
// 获取屏幕边界到安全区域的位置
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- ... -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      wh: 0
    };
  },
  // 页面加载完成后
  onLoad() {
    // 获取设备信息
    const info = uni.getSystemInfoSync();
    // 为当前 可用高度对应变量进行赋值
    this.wh = info.windowHeight;
  }
}
</script>

.n {
  /* .. */
  top: var(--windows-top);
  bottom: var(--windows-bottom);
}

<button @click="redirectToAbout">跳转到关于页面</button>

uni.switchTab({
  url: '/pages/tabbar/home'
})

<!-- 阻止默认行为 -->
<button @click.prevent="handleClick">点击我</button>

<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">点击我</button>

<!-- 使用事件捕获模式 -->
<button @click.capture="handleClick">点击我</button>

<!-- 只有当事件是从事件源本身触发时才触发回调函数 -->
<button @click.self="handleClick">点击我</button>

<!-- 只触发一次回调函数 -->
<button @click.once="handleClick">点击我</button>

<!-- 提高页面滚动的流畅度 -->
<button @click.passive="handleClick">点击我</button>

<button type="primary">按钮</button>

 <template>
 <checkbox-group>
     <label>
         <checkbox value="cb" checked="true" />选中
     </label>
     <label>
         <checkbox value="cb" />未选中
     </label>
 </checkbox-group>
 </template>

<smm-lyricBar name='你好'></smm-lyricBar>

export default {
// 也可以用数组的简化方式 props:["name"]
props: {
   name: {
    // 限制传入的类型
    type: String,
    // 默认值
    default: ""
   }
 }
}

<template>
    <view @click="cilckFn"></view>
</template>
<script>
export default {
    methods: {
        cilckFn() {
            this.$emit('click', 1);
        }
    }
}
</script>

<template>
    <smm-title @click="cilckFn"></smm-title>
</template>
<script>
export default {
    methods: {
        cilckFn(e) {
            console.log(e); // 1
        }
    }
}
</script>

<template>
    <smm-title :name.sync="str"></smm-title>
</template>
<script>
export default {
    data() {
        return {
            str: 'hello'
        }
    }
}
</script>

<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    methods: {
        changeStr() {
            // 父级通过 .sync 修饰的变量 可由子级通过此方式修改
            this.$emit('updata:name', 'word');
        }
    }
}
</script>

<template>
    <view @click="cilckFn"></view>
</template>
<script>
export default {
    methods: {
        cilckFn() {
            this.$emit('click');
        }
    }
}
</script>

<template>
    <!-- 直接对组件调用原生的 单击 事件 -->
    <smm-title @click.native="cilckFn"></smm-title>
</template>

const baseURL = 'http接口地址'

const httpInterceptor = {
    // 拦截前触发
    invoke(options: UniApp.RequestOptions) {
        // 如果链接中没有地址
        if (!options.url.startsWith('http')) {
            options.url = baseURL + options.url
        }
        // 修改请求超时 默认60000毫秒
        options.timeout = 10000
        // 设置请求头
        options.header = {
            ...options.header,
            'source-client': 'app',
        }
        // ...
        // 如有 token
        if (token) {
            // 添加 token
            options.header.Authorization = token
        }
    },
}

uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

// 响应拦截器
export const http = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            // 响应成功
            success(res) {
                // 数据是否返回成功
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    resolve(res.data)
                }
                // token 是否失效
                else if (res.statusCode === 401) {
                    // ...
                    // 失败回传
                    reject(res)
                } else {
                    uni.showToast({
                        title: (res.data).msg || "请求错误",
                        icon: "none"
                    })
                    reject(res)
                }
            },
            // 响应失败
            fail(err) {
                uni.showToast({
                    title: "网络错误，换个网络试试",
                    icon: "none"
                })
                reject(err)
            }
        })
    })
}

<script setup lang="ts">
import { http } from '@/utils/http'
// ...
http({
 // ...
})
</script>

<template>
</template>

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

uni.chooseImage({
  count: 1, // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    // 上传文件
    uni.uploadFile({
      url: 'your/upload/url',
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        // 添加其他的 FormData 数据
        key1: value1,
        key2: value2,
        // ...
      },
      success: function (res) {
        console.log('上传成功', res);
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000
        });
      },
      fail: function (res) {
        console.log('上传失败', res);
        uni.showToast({
          title: '上传失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }
});

uni.chooseVideo({
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  compressed: true, // 是否压缩视频，默认为 true
  maxDuration: 60, // 拍摄最长拍摄时间，单位秒，默认为 60
  camera: 'back', // 指定使用前置或后置摄像头，默认为后置摄像头
  success: function (res) {
    var tempFilePath = res.tempFilePath;
    // 上传文件
    uni.uploadFile({
      url: 'your/upload/url',
      filePath: tempFilePath,
      name: 'file',
      formData: {
        // 添加其他的 FormData 数据
        key1: value1,
        key2: value2,
        // ...
      },
      success: function (res) {
        console.log('上传成功', res);
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000
        });
      },
      fail: function (res) {
        console.log('上传失败', res);
        uni.showToast({
          title: '上传失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }
});

// 下载并保存视频
uni.downloadFile({
  url: 'https://example.com/my-video.mp4',
  success: function (res) {
    if (res.statusCode === 200) {
      // 保存视频到相册
      uni.saveVideoToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
          uni.showToast({
            title: '视频保存成功',
            icon: 'success'
          });
        },
        fail: function (error) {
          uni.showToast({
            title: '视频保存失败',
            icon: 'none'
          });
        }
      });
    }
  },
  fail: function (error) {
    uni.showToast({
      title: '视频下载失败',
      icon: 'none'
    });
  }
});

import en from './en.json'
import zhHans from './zh-Hans.json'

export default {
  en,
  'zh-Hans': zhHans
}

<template>
<view class="list-item">
  <button>{{$t('login.login')}}</button>
</template>

that = this
// ....
data() {
  return {
    langList: [{
      text: '简体中文',
      code: 'zh-Hans'
    }, {
      text: 'English',
      code: 'en'
    }],
    nowLang: ''
  };
},
methods: {
    changeLanguage(c) {
        const lang = c.code;
        uni.showModal({
            title: this.$t('message.changeLang.title'),
            content: this.$t('message.changeLang.content')
            success(e) {
                if (e.confirm) {
                    // 设置当前语言环境
                    uni.setLocale(lang);
                    // 在当前 VueI18n 实例中切换语言
                    that.$i18n.locale = lang;
                }
            }
        })
    }
}

pnpm i @dcloudio/uni-ui
# uni-ui 使用了 sass
npm install sass --save-dev

{
  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
    }
  },
  "pages": [
    // …省略
  ]
}

pnpm i -D @uni-helper/uni-ui-types

{
  "compilerOptions": {
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  // [!code ++]
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }
}

# 强制安装 pinia
# 如果安装出现报错比如说:Pinia 依赖的 
# @vue/composition-api 要求 Vue 的版本在 “>= 2.5 < 2.7” 范围内，
# 但实际上你的项目使用的是 Vue 3。
# 对于@vue/composition-api是Vue2版本提供组合式API的插件，
# Vue3不需要所以碰到这个问题直接强制安装pinia
npm install pinia@2.2.0 --force
npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'

import { createSSRApp } from "vue";
import App from "./App.vue";
import pinia from "./stores";

export function createApp() {
  const app = createSSRApp(App);
  app.use(pinia);
  return {
    app,
  };
}

import { defineStore } from "pinia";
import { ref } from "vue";

type UserInfo = {
    name: string
}

export const useUserInfoStore = defineStore('userInfo', () => {
    const userInfo = ref<UserInfo>()
    const setUserInfo = (val: UserInfo) => {
        userInfo.value = val
    }
    const clearUserInfo = () => {
        userInfo.value = undefined
    }
    return { userInfo, setUserInfo, clearUserInfo }
}, {
    // 修正本地化存放的操作 为兼容多平台的存储策略
    persist: {
        storage: {
            getItem(key) {
                return uni.getStorageSync(key)
            },
            setItem(key, value) {
                uni.setStorageSync(key, value)
            },
        },
    }
})

<script setup lang="ts">
import { ref } from 'vue'
import { useUserInfoStore } from '@/stores';
const userInfoStore = useUserInfoStore()
const login = () => {
  userInfoStore.setUserInfo({ name: '屎猫猫' })
}
const clear = () => {
  userInfoStore.clearUserInfo()
}
</script>
<template>
  {{ userInfoStore.userInfo }}
  <button @tap="login">登录</button>
  <button @tap="clear">清除</button>
</template>