使用uniApp的cli模式安装，可以使用vscode开发。不用再单独去下载HBuilderX.
1.基础安装 vue3+ts+uniapp
方法一：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
方法二：可以去uni-preset-vue的vite分支下选择vite-ts直接下载zip包，解压后粘贴到自己的项目中
2.安装依赖启动
pnpm install 或者 pnpm update
pnpm run dev:mp-weixin 或者 yarn run dev:mp-weixin
启动起来后打开微信小程序IDE，选择导入，然后选择dist目录下dev文件夹下的mp-weixin导入
3.安装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>
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.ts
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"]})],
});
)
