基于uniapp+vue3+ts小程序项目实战之项目初始化
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
🚀 作者 :“二当家-小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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)