uniapp は uview-plus と Pinia (vue3 プロジェクト) を使用します

パート 1: uview-plus の使用

1.vue3 uniappプロジェクトを作成する

デフォルトのテンプレートを選択 Vue バージョン 3 を選択

 2. Hbuilderプラグインマーケットの紹介

uniapp プラグイン マーケットで uview plus を検索し、プラグインを選択して、右側の「プラグインをダウンロードして HBuilderX をインポート」をクリックします

作成したばかりのプロジェクトを選択してインポートします

3. uview-plus をプロジェクトに導入する

ステップ 1:プロジェクトのルート ディレクトリmain.jsに uview-plus をインポートして使用する

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

uni.scssステップ 2: uview-plus のグローバル SCSS テーマ ファイルをプロジェクトのルート ディレクトリに導入します。

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

ステップ 3: App.vue のスタイルに uview-plus 基本スタイルを導入する

注: lang="scss" 属性を style タグに追加する必要があります。

<style lang="scss">
    /* 需要给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-plus/index.scss";
</style>

ステップ 5: 使用したページで uview-plus コンポーネントを使用すると、効果が表示されます

以下は私が使用するボタンコンポーネントです

<!-- index.vue -->
<template>
  <view>
    <u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
  </view>
</template>

結果を示す：

パート 2: Pinia の使用

注: Ponia は HBuilder X にインストールする必要はなく、直接使用できます。

1.プロジェクトのルートディレクトリmain.jsにPiniaを導入して使用する

備考: ピニアを返却する必要があります

//main.js
import App from './App'
import * as Pinia from 'pinia';

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
    Pinia  //此处必须返回Pinia
  }
}
// #endif

2. ファイル内にストア フォルダーを作成し、ストア内に新しい user.js ファイルを作成し、共有状態コードを書き込みます 

import { defineStore } from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User',{
  state:()=>{
    return {
      count:0
    }
  }
})

//暴露用户小仓库
export default useUserStore

3. ページ内の共有データを呼び出してエフェクトを表示する

//index.vue
<template>
  <view>
    <u-button type="primary" :plain="true" :hairline="true" text="细边" @click="add"></u-button>
  </view>
</template>

<script setup>
//引入用户相关的小仓库
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
//定义button点击事件add
const add = ()=>{
 console.log( useStore.count++);
}
</script>

 エフェクト表示：ボタンをクリック、カウント+1