🚀 作者 :“二当家-小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状态管理的配置和使用,每一步都详细说明了具体的操作和配置方法。

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

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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐