プロジェクトを作成します: 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 をインストールして、「vue」から多数のインポート { ref 、リアクティブ ..... } の問題を解決できます。
npm i -D unplugin-auto-import
レスポンシブ構文シュガーは現在、デフォルトで無効になっており、有効にするには明示的に選択する必要があります。さらに、以下にリストされているすべての構成には、vue@^3.2.25 が必要です。
SFC および js(x)/ts(x) ファイルには@vitejs/plugin-vue@>=2.0.0 が必要です。変換が実行される前に、ファイルに対してクイック使用状況チェックが行われるため、マクロを使用しないファイルのパフォーマンスが低下することはありません。
reactivityTransform は、SFC だけに適用されるわけではないため、script.refSugar ではなく、プラグインの最上位オプションになっていることに注意してください。
ルート ディレクトリvite.config.jsファイル、構成は次のとおりです。
import { defineConfig } from "vite";
const path = require("パス");
function resolve(dir) { return path.join(__dirname, dir); "@dcloudio/vite-plugin-uni" から 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