1、使用命令创建 （node版本要大于18）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-
如果命令不成去gitee下载（按下操作）
https://uniapp.dcloud.net.cn/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

2、下载后下载node_modules
3、通过npm run dev:mp-weixin 命令启动，产生dist文件夹，使用微信开发者工具打开dist下面的文件夹在微信小程序中运行。
4、vscode安装插件
uni-create-view（创建页面或组件）
uni-helper(代码提示或错误提示)
uniapp小程序扩展
安装ts校验类型

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

tsconfig.json中配置
"types": [ 
    "@dcloudio/types",
    "@types/wechat-miniprogram",
    "@uni-helper/uni-app-types"
  ]


"vueCompilerOptions": {
  "experimentalRuntimeMode": "runtime-uni-app"
},

image.png

5、新建页面

image.png

6、在src下的pages.json中引入页面

{
    "pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/cart/cart",
            "style": {
                "navigationBarTitleText": "购物车"
            }
        },
        {
            "path": "pages/category/category",
            "style": {
                "navigationBarTitleText": "分类"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color":"#333", 
        "selectedColor":"#27ba9b",
        "backgroundColor":"#fff",
        "borderStyle":"white",
        "list": [
            {
                "text":"首页",
                "pagePath": "pages/index/index",
                "iconPath":"static/image/tabbar/home_unselect.png",
                "selectedIconPath":"static/image/tabbar/home_selected.png"
            },
            {
                "text":"分类",
                "pagePath": "pages/category/category",
                "iconPath":"static/image/tabbar/home_unselect.png",
                "selectedIconPath":"static/image/tabbar/home_selected.png"
            },
            {
                "text":"购物车",
                "pagePath": "pages/cart/cart",
                "iconPath":"static/image/tabbar/home_unselect.png",
                "selectedIconPath":"static/image/tabbar/home_selected.png"
            },
            {
                "text":"我的",
                "pagePath": "pages/my/my",
                "iconPath":"static/image/tabbar/mine_unselect.png",
                "selectedIconPath":"static/image/tabbar/mine_selected.png"
            }
            
        ]
    }
}

7、导入uni-ui
npm i @dcloudio/uni-ui
配置

// pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    
    // 其他内容
    pages:[
        // ...
    ]
}

8、导入pinia

yarn add pinia
# 或者使用 npm
npm install pinia

10、导入pinia持久化工具

pnpm i pinia-plugin-persistedstate
#或者
yarn add pinia-plugin-persistedstate

注册pinia

//main.ts
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)// 将插件添加到 pinia 实例上
createApp(App).use(pinia).mount('#app')// 使用pinia插件

11、使用pinia
store/user

import { ref, computed } from "vue";
import { defineStore } from "pinia";
interface Data {
  token: String;
  infor: {
    name: String;
    phone: Number;
  };
}
export const useMemberstore = defineStore(
  "member",
  () => {
    const profile = ref({});
    function gitProfile() {
      profile.value = {
        token: "token",
        infor: {
          name: "张三",
          phone: 13689999999,
        },
      };
    }
    function clearProfile() {
      profile.value = {};
    }
    return { profile, gitProfile, clearProfile };
  },
  {
    //网页端配置
    // persist: true,
    //小程序配置
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key);
        },
        setItem(key, value) {
          uni.setStorageSync(key, value);
        },
      },
    },
  }
);

调用

import { useMemberstore } from "@/store/user";
useMemberstore().gitProfile();
console.log( useMemberstore().profile);

结果

image.png

持久化

image.png