创建项目: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
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐