xingli

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.ts

  "compilerOptions": {
    "ignoreDeprecations": "5.0"
  },

<image mode="xxx"></image>

npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext","dom"],
    "types": [
      "@dcloudio/types", // uni-app API タイプ
      "miniprogram-api-typings", // 原生WeChatミニプログラムタイプ
      "@uni-helper/uni-app-types" // uni-app コンポーネントタイプ
    ]
  },
  // vue コンパイラタイプ、タグタイプをチェック
  "vueCompilerOptions": {
    "nativeTags": ["block","component","template","slot"],
  },
  "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]
}

npm install uview-plus
npm install dayjs
npm install clipboard

// sassをインストール
npm install sass -D 
// sass-loaderをインストール、バージョン10が必要です。さもなければvueとsassの互換性の問題でエラーが発生する可能性があります。
npm install sass-loader@10 -D

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

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

// App.vue
<style lang="scss">
	/* 最初の行に書くことに注意し、styleタグにlang="scss"属性を追加します */
	@import "uview-plus/index.scss";
</style>

// pages.json
{
	"easycom": {
		// 必ずcustom内に配置してください。さもなければ無効です。https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// これは元々の内容です
	"pages": [
		// ......
	]
}

declare module "uview-plus"

<u-button text="提出"></u-button>

pnpm add [email protected]

//main.ts
 
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
 
export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia, // ここでPiniaを返す必要があります
	};
}

// stores/counter.js
import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', {
	state: () => {
		return { count: 0 };
	},
	// こう定義することもできます
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
	},
});

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// 自動補完！ ✨
counter.$patch({ count: counter.count + 1 })
// またはアクションを使用して代替
counter.increment()
</script>
<template>
  <!-- storeからstateに直接アクセス -->
  <div>現在のカウント: {{ counter.count }}</div>
</template>

pnpm i pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

import { defineStore } from 'pinia'
 
export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('こんにちは pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

export const useMemberStore = defineStore(
  'main',
  () => {
    //…省略
  },
  {
    // 永続化を設定
    persist: {
      // マルチプラットフォームAPIに互換性を持たせる
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) 
        },
        getItem(key) {
          return uni.getStorageSync(key) 
        },
      },
    },
  },
)

// src/utils/http.ts
 
// リクエストの基本URL
const baseURL = 'xxxx'
 
// インターセプター設定
const httpInterceptor = {
  // インターセプト前にトリガー
  invoke(options: UniApp.RequestOptions) {
    // 1. httpで始まらない場合はURLを結合
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. リクエストタイムアウト
    options.timeout = 10000
    // 3. ミニプログラム端のリクエストヘッダー識別子を追加
    options.header = {
      'source-client': 'miniapp',
      ...options.header,
    }
    // 4. トークンリクエストヘッダー識別子を追加
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }
  },
}
 
// requestリクエストをインターセプト
uni.addInterceptor('request', httpInterceptor)
// uploadFileファイルアップロードをインターセプト
uni.addInterceptor('uploadFile', httpInterceptor)

/**
 * リクエスト関数
 * @param  UniApp.RequestOptions
 * @returns Promise
 *  1. Promiseオブジェクトを返し、戻り値のタイプを処理
 *  2. データ取得成功
 *    2.1 コアデータres.dataを抽出
 *    2.2 タイプを追加し、ジェネリックをサポート
 *  3. データ取得失敗
 *    3.1 401エラー  -> ユーザー情報をクリアし、ログインページにリダイレクト
 *    3.2 その他のエラー -> バックエンドのエラーメッセージに基づいて軽いヒント
 *    3.3 ネットワークエラー -> ユーザーにネットワークを変更するように通知
 */
type Data<T> = {
  code: string
  msg: string
  result: T
}
// 2.2 タイプを追加し、ジェネリックをサポート
export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. Promiseオブジェクトを返す
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      // レスポンス成功
      success(res) {
        // ステータスコード2xx、axiosの設計を参考
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 コアデータres.dataを抽出
          resolve(res.data as Data<T>)
        } else if (res.statusCode === 401) {
          // 401エラー  -> ユーザー情報をクリアし、ログインページにリダイレクト
          const memberStore = useMemberStore()
          memberStore.clearProfile()
          uni.navigateTo({ url: '/pages/login/login' })
          reject(res)
        } else {
          // その他のエラー -> バックエンドのエラーメッセージに基づいて軽いヒント
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || 'リクエストエラー',
          })
          reject(res)
        }
      },
      // レスポンス失敗
      fail(err) {
        uni.showToast({
          icon: 'none',
          title: 'ネットワークエラー、ネットワークを変更してみてください',
        })
        reject(err)
      },
    })
  })
}

npm i unplugin-auto-import -save

//vite.config.ts
 
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: process.env.NODE_ENV === 'development',
  },
  plugins: [
    uni(),
    AutoImport({ // 使用
      imports: ['vue'],
      dts: 'src/auto-import.d.ts',
      // eslintを使用している場合は記述を追加してください。使用していない場合は無視できます。
      eslintrc: {
        enabled: true,
      },
    })
  ],
})

//.eslintrc.js
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
    'plugin:prettier/recommended', // prettierプラグインを追加
  ],

npm install miniprogram-api-typings --save-dev