前言

使用uniApp的cli模式安装，可以使用vscode开发。不用再单独去下载HBuilderX.

开发流程

1.基础安装 vue3+ts+uniapp
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
pnpm install

备注：安装可能会报错，提示esbuild问题，根据提示在package.json指定版本，然后重新执行

pnpm install  或者  pnpm update

uniApp：使用vue3+Vite4+pinia+sass技术栈构建_uniapp

uniApp：使用vue3+Vite4+pinia+sass技术栈构建_pinia_02

2.安装pinia
pnpm add pinia@2.0.36

备注：这里要指定版本，太高了编译会出错

在src目录创建store文件夹，创建user.ts

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
    state() {
        return {
            userInfo: {
              username:"username",
              phone:"phone"
            },
        }
    },
   actions: {
        setUserInfo(data) {
            this.userInfo = data
        }
   }
})

修改main.ts,全局引入pinia

import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
export function createApp() {
  const app = createSSRApp(App);
  const store = Pinia.createPinia();
  app.use(store);
  return {
    app,
    Pinia
  };
}

在页面使用pinia

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="text-area">
			<text class="title">{{ title }}-{{ userInfo.userInfo.username }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useStore } from "@/store/user"
const userInfo = useStore()
const title = ref("Hello")
</script>
3.pinia数据持久化，安装pinia-plugin-unistorage

如果不安装持久化插件，页面刷新后pinia会重新加载，数据会丢失

pnpm add pinia-plugin-unistorage

修改mian.js

import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import { createUnistorage } from 'pinia-plugin-unistorage'
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  const store = Pinia.createPinia();
  store.use(createUnistorage());//持久化
  app.use(store);
  return {
    app,
    Pinia,
  };
}

修改/src/store/user.ts

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
    state() {
        return {
            userInfo: {
                username: "username",
                phone: "phone"
            },
        }
    },
    unistorage: true,//新增，持久化
    actions: {
        setUserInfo(data: any) {
            this.userInfo = data
        }
    }
})
4.安装sass
pnpm i sass -D
pnpm i sass-loader@10.1.1 -D

页面添加sass标识

<style lang="scss" scoped>
</style>
5.配置vue自动导入

安装unplugin-auto-import插件

pnpm add unplugin-auto-import -D

修改vite.config.js

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [uni(),
            AutoImport({
              imports: ["vue"]
            })],
});
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue