uniapp+Vue3+Vite+ts+pinia

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

uniapp+Vue3+Vite+ts+pinia相关推荐

vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
vue3 + vite + ts + pinia + yarn
Vue3 + Vite + TypeScript + Pinia + Yarn yarn 常用命令 vite 构建工具 vite 创建项目 Vue 3 vue 3 组件库 vue 文档组合式 API ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...
如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...
webRtc播放rtsp视频流（vue2、vue3+vite+ts）
一.下载webRtc 开发环境用的win10版本的. github上直接下载,速度感人. Releases · mpromonet/webrtc-streamer · GitHub 提供资源下载,0积 ...
一个基于vue3+vite+ts的完整项目
VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 vue3 ...

uniapp+Vue3+Vite+ts+pinia

uniapp+Vue3+Vite+ts+pinia相关推荐

最新文章

热门文章