创建项目：npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
使用pinia-plugin-persistedstate可以实现持久化存储。安装如下，具体使用看pinia文档，或者我的vue收藏：
npm i pinia-plugin-persistedstate
# 或者使用 yarn
yarn add pinia-plugin-persistedstate
# 或者使用 pnpm
pnpm i pinia-plugin-persistedstate
可以先在pakage.json配置，再npm i，如下：
"pinia": "^2.0.32",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9",
"mitt": "^3.0.0",//事件总线，代替eventbus
"js-base64": "^2.6.2",
"sass": "^1.26.10",//如果用less，就不需要sass了
"sass-loader": "^7.1.0",
"node-sass":"^4.14.1","weixin-js-sdk": "^1.6.0",
"axios": "1.1.3"
启动后：在默认的index.vue页面将原先代码删除（uni-app默认创建的页面是vue2的语法，需要改成vue3的），如下：
- 选项式 API (Options API) 写法：
- <script>
- export default {
- data() {
- return {
- title: 'Hello',
- }
- },
- onLoad() {},
- methods: {},
- }
- </script>
+ 替换成
+ 组合式 API (Composition API) 写法：
+ <script setup>
+ import { ref } from 'vue'
+ const title = ref("我是首页内容")
+ </script>
可以安装插件unplugin-auto-import，解决 import { ref , reactive ..... } from 'vue' 大量引入的问题
npm i -D unplugin-auto-import
响应性语法糖目前默认是关闭状态，需要你显式选择启用。此外，以下列出的所有配置都需要 vue@^3.2.25。
需要 @vitejs/plugin-vue@>=2.0.0
应用于 SFC 和 js(x)/ts(x) 文件。在执行转换之前，会对文件进行快速的使用检查，因此不使用宏的文件应该不会有性能损失。
注意 reactivityTransform 现在是一个插件的顶层选项，而不再是位于 script.refSugar 之中了，因为它不仅仅只对 SFC 起效。
根目录vite.config.js文件, 配置如下:
import { defineConfig } from "vite";
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
import uni from "@dcloudio/vite-plugin-uni";
export default defineConfig({
plugins: [
uni({
vueOptions: {
reactivityTransform: true, // 开启响应式语法糖
},
}),
],
resolve: {
alias: { "@": resolve("src") },
},
});
运行：
# 运行到 h5 npm run dev:h5 # 运行到 app npm run dev:app # 运行到 微信小程序 npm run dev:mp-weixin
打包：
# 打包到 h5 npm run build:h5 # 打包到 app npm run build:app # 打包到 微信小程序 npm run build:mp-weixin