🚀 作者 ：“二当家-小D”
🚀 博主简介：⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬
🍅文末获取源码联系 配套笔记打包🍅目录
一、小滴课堂微信小程序项目初始化
1.1小滴课堂微信小程序项目需求分析
首页:
分类：
学习：
我的：
二、项目初始化创建
2.1项目初始化创建
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project2.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状态管理的配置和使用，每一步都详细说明了具体的操作和配置方法。
今天的文章就到这里了，还有更多内容下次继续。
资料获取📚
完整代码和笔记已经准备好，如果有问题，可以在评论区留言讨论💬
原创不易，别忘了点赞👍+收藏⭐哦！
点击下方链接即可获取完整资料压缩包🎁，快来领取吧！↓↓↓↓
