搭建uniapp+vue3+vite+ts+pinia基础骨架
现在uniapp对于vue3支持越来越完善。自己本身大部分使用也是vue开发,也由于vue3版本的发布,也非常喜欢Vue setup 风格。在此之前uniapp对于vue3支持还不知那么好。选择京东Taro,现在uniapp越来也完善。两者都是非常优秀框架,也没啥可挑剔了。看项目需求来选择。前端时间轻量级pinia也加入vue大家庭。关于pinia可以去官网了解。
现在自个如果开发小程序大部分选择用uniapp,搭建一个基础骨架也让自己前期开发节省很多时间。
项目技术栈
- Vue3
- Vite
- TypeScript
- Pinia
1、使用cli脚手架uniapp/Vue3/Vite版本
创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
创建完成之后项目结构和vite创建vue3结构基本一样,src入口目录
2、项目文件别名
配置一下我们项目别名,方便引用
/@/ 表示别名src目录,需要配置其他别名,另行配置即可 vite文档
注意:项目使用TypeScript, 我们还需要修改一下ts配置文件,不然我们引入会出现找不到, 如下图
3、使用Pinia状态管理
在项目package.json 文件中去除vuex依赖项,安装Pinia代替vuex
安装pinia(官方网站)
npm install pinia
在线src目录下新建一个store目录。store目录新建index.ts文件和modules目录。在modules目录进行模块化管理每个模块。如下图:
index.ts文件引入pinia
import type { App } from 'vue';
import { createPinia} from 'pinia';
const store = createPinia();
export function setupStore(app: App<Element>){
app.use(store);
}
在scr/main.ts 文件引入store;
import { createSSRApp } from "vue";
import App from "./App.vue";
import { setupStore } from '/@/store';
export function createApp() {
const app = createSSRApp(App);
// pinia 仓库管理
setupStore(app);
return {
app,
};
}
再store/modules文件新建一个仓库模块、如app.ts(表示主程序)、cart.ts(购物车模块)、user.ts(用户模块),下面案例示例:
在store/modules/app.ts
import { defineStore } from 'pinia';
export const useAppStore = defineStore({
id: 'app-store',
state: () => ({
test: '仓库测试值',
}),
getters: {
getTest(): string {
return this.test;
}
},
actions: {
changeVal() {
this.test = '改变值为:14';
}
}
})
注意:仓库id是唯一标识,这里与vuex区别,不需要mutation,异步与同步均可以在actions;详细说明请查阅pinia文档.
使用pinia模块,直接可以在需要页面引入响应模块使用。示例如下图:
运行、发布uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下:
值 | 平台 |
---|---|
app-plus | app平台生成打包资源(支持npm run build:app-plus,可用于持续集成。不支持run,运行调试仍需在HBuilderX中操作) |
h5 | h5 |
mp-alipay | 支付宝小程序 |
mp-baidu | 百度小程序 |
mp-weixin | 微信小程序 |
mp-toutiao | 字节跳动小程序 |
mp-lark | 飞书小程序 |
mp-qq | QQ小程序 |
mp-360 | 360小程序 |
mp-kuaishou | 快手小程序 |
quickapp-webview | 快应用(webview) |
quickapp-webview-union | 快应用联盟 |
quickapp-webview-huawei | 快应用华为 |
4 comments
发帖软件 www.teamczyx.com
你好,你这个有git地址吗?
大佬。问一下,vite打包,怎么分包啊。page.json也配置了subpackage。manifest.json中subPackages也是true。但是不起作用
写什么都不重要,因为写什么都有人看。贵在坚持,谢谢分享