🚀 作者 ：“二当家-小D”

🚀 博主简介：⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等

🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

🍅文末获取源码联系 配套笔记打包🍅目录

一、小滴课堂微信小程序项目初始化

1.1小滴课堂微信小程序项目需求分析

首页:

分类：

学习：

我的：

二、项目初始化创建

2.1项目初始化创建

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

2.2原子化css框架-unocss配置

unocss.config.ts文件配置

// unocss.config.ts

import presetWeapp from 'unocss-preset-weapp'
import { defineConfig } from 'unocss'
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

export default defineConfig({
  presets: [
    presetWeapp(), // 工具预设
  ],
  transformers: [
    transformerAttributify(), // 支持属性化模式
    transformerClass(), // 转换转义类名，支持class写法
  ],
  shortcuts: [
    { center: 'flex items-center justify-center' },
    { around: 'flex items-center justify-around' },
    { between: 'flex items-center justify-between' },
  ]
})

main.ts文件配置

// main.ts
import 'uno.css'

vite.config.ts文件配置

// vite.config.ts
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [Unocss()]
})

2.3响应式语法糖和自动引入插件配置

开启响应式语法糖

// vite.config.ts
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [
    uni({
    vueOptions: {
      reactivityTransform: true
    }
  })]
})

ts识别语法糖写法

"types": ["vue/ref-macros"]

响应式语法糖和自动引入插件配置自动引入插件配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
  AutoImport({
    dts: 'src/typings/auto-imports.d.ts',
    imports: ['vue', 'uni-app', 'pinia'],
    dirs: ['src/composables']
  })]
})

2.3uni-app框架中使用Pinia状态管理的配置

安装插件

pnpm i pinia@2.0.30 pinia-plugin-persistedstate@3.0.2 -S

引入Pinia

// main.ts
import { createPinia } from 'pinia';
import { createSSRApp } from 'vue';
import { createPersistedState } from 'pinia-plugin-persistedstate';
import App from './App.vue';

import 'uno.css';

// 引入Pinia和持久缓存的设置
const pinia = createPinia().use(
  createPersistedState({
    storage: {
      getItem(key: string) {
        return uni.getStorageSync(key);
      },
      setItem(key: string, value: string) {
        uni.setStorageSync(key, value);
      },
    },
  })
);

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

2.4uni-app框架中使用Pinia状态管理的使用

src根目录新建composables目录（用于放置Pinia配置文件）

测试Pinia配置成功与否

// user.ts
export const useUser = defineStore(
  'user',
  () => {
    let isLogin = $ref<boolean>(false);
    return $$({
      isLogin,
    });
  },
  {
    persist: true,
  }
);

配置TS对响应式语法糖的支持

"types": ["@dcloudio/types", "vue/ref-macros"]

vue3官网Reactivity Transform文档地址

https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables

返回函数范围内使用 $$ 包裹保持响应性

结束语

今天的内容着重介绍了uniapp+vue3+ts的微信小程序项目的初始化过程以及相关配置。从需求分析开始，到项目初始化创建、CSS框架配置、响应式语法糖和自动引入插件配置，再到在uni-app框架中使用Pinia状态管理的配置和使用，每一步都详细说明了具体的操作和配置方法。

今天的文章就到这里了，还有更多内容下次继续。

资料获取📚
完整代码和笔记已经准备好，如果有问题，可以在评论区留言讨论💬
原创不易，别忘了点赞👍+收藏⭐哦！
点击下方链接即可获取完整资料压缩包🎁，快来领取吧！↓↓↓↓