uniapp+Vue3+Vite+ts+pinia

Create a project: npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Use pinia-plugin-persistedstate to achieve persistent storage. The installation is as follows, see the pinia document for specific usage, or my vue collection:

npm i pinia-plugin-persistedstate
# or use yarn
yarn add pinia-plugin-persistedstate
# or use pnpm
pnpm i pinia-plugin-persistedstate

It can be configured in pakage.json first, and then npm i, as follows:

"pinia": "^2.0.32",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9",
   "mitt": "^3.0.0",//event bus , instead of eventbus
   "js-base64": "^2.6.2",
   "sass": "^1.26.10",//If you use less, you don't need sass
   "sass-loader": "^7.1.0" ,
   "node-sass":"^4.14.1",

"weixin-js-sdk": "^1.6.0",
   "axios": "1.1.3"

After startup: Delete the original code on the default index.vue page (the default page created by uni-app is the syntax of vue2, which needs to be changed to vue3), as follows:

- 选项式 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>

You can install the plug-in unplugin-auto-import to solve the problem of a large number of import { ref , reactive ..... } from 'vue'

npm i -D unplugin-auto-import

Responsive syntax sugar is currently disabled by default and requires you to explicitly choose to enable it. Additionally, all configurations listed below require vue@^3.2.25.

Requires @vitejs/plugin-vue@>=2.0.0
for SFC and js(x)/ts(x) files. A quick usage check is done on the file before the conversion is performed, so there should be no performance penalty for files that don't use macros.
Note that reactivityTransform is now a top-level option of the plugin, not in script.refSugar anymore, since it doesn't apply only to SFC.

The root directory vite.config.js file, the configuration is as follows:

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") },
},
});

run:

# 运行到 h5   
npm run dev:h5  
# 运行到 app   
npm run dev:app  
# 运行到 微信小程序  
npm run dev:mp-weixin

Pack:

# 打包到 h5   
npm run build:h5  
# 打包到 app   
npm run build:app  
# 打包到 微信小程序  
npm run build:mp-weixin

uniapp+Vue3+Vite+ts+pinia

Guess you like