搭建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

20220208114804.png

创建完成之后项目结构和vite创建vue3结构基本一样,src入口目录

2、项目文件别名

配置一下我们项目别名,方便引用

/@/ 表示别名src目录,需要配置其他别名,另行配置即可 vite文档

20220208144041.png

注意:项目使用TypeScript, 我们还需要修改一下ts配置文件,不然我们引入会出现找不到, 如下图

20220208144631.png

3、使用Pinia状态管理

在项目package.json 文件中去除vuex依赖项,安装Pinia代替vuex
安装pinia(官方网站)

npm install pinia

在线src目录下新建一个store目录。store目录新建index.ts文件和modules目录。在modules目录进行模块化管理每个模块。如下图:

20220208145802.png

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模块,直接可以在需要页面引入响应模块使用。示例如下图:

0220208150924.png

运行、发布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 快应用华为
Last modification:February 10, 2022
如果觉得我的文章对你有用,请随意赞赏