Cree un proyecto: npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
Utilice pinia-plugin-persistedstate para lograr un almacenamiento persistente. La instalación es la siguiente, consulte el documento pinia para un uso específico o mi colección vue:
npm i pinia-plugin-persistedstate
# o use yarn
yarn agregue pinia-plugin-persistedstate
# o use pnpm
pnpm i pinia-plugin-persistedstate
Se puede configurar primero en pakage.json y luego en npm i, de la siguiente manera:
"pinia": "^2.0.32",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9",
"mitt": "^3.0.0",//bus de eventos , en lugar de eventbus
"js-base64": "^2.6.2",
"sass": "^1.26.10",//Si usa menos, no necesita sass
"sass-loader": "^7.1 .0",
"nodo-sass":"^4.14.1","weixin-js-sdk": "^1.6.0",
"axios": "1.1.3"
Después del inicio: elimine el código original en la página index.vue predeterminada (la página predeterminada creada por uni-app es la sintaxis de vue2, que debe cambiarse a vue3), de la siguiente manera:
- 选项式 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>
Puede instalar el complemento unplugin-auto-import para resolver el problema de una gran cantidad de import { ref , reactive ..... } from 'vue'
npm i -D desenchufar-importación automática
El azúcar de sintaxis receptiva está actualmente deshabilitado de forma predeterminada y requiere que elija explícitamente habilitarlo. Además, todas las configuraciones enumeradas a continuación requieren vue@^3.2.25.
Requiere @vitejs/plugin-vue@>=2.0.0
para archivos SFC y js(x)/ts(x). Se realiza una verificación rápida de uso en el archivo antes de realizar la conversión, por lo que no debería haber una penalización de rendimiento para los archivos que no usan macros.
Tenga en cuenta que reactivityTransform ahora es una opción de nivel superior del complemento, ya no está en script.refSugar, ya que no se aplica solo a SFC.
El archivo del directorio raíz vite.config.js , la configuración es la siguiente:
importar {defineConfig} desde "vite";
const ruta = require("ruta");
función resolver (dir) { return path.join (__dirname, dir); } importar uni desde "@dcloudio/vite-plugin-uni"; export default defineConfig({ plugins: [ uni({ vueOptions: { reactiveTransform: true, // 开启响应式语法糖 }, }), ], resolve: { alias: { "@": resolve("src") }, }, });
correr:
# 运行到 h5 npm run dev:h5 # 运行到 app npm run dev:app # 运行到 微信小程序 npm run dev:mp-weixin
Embalar:
# 打包到 h5 npm run build:h5 # 打包到 app npm run build:app # 打包到 微信小程序 npm run build:mp-weixin