【uniapp】小規模プログラム開発、初期化プロジェクト vscode

uniapp を使用して小さなプログラムを開発すると、1 つのコードをさまざまなプラットフォーム用の複数の小さなプログラムにパッケージ化できます。
ここでは例として uniapp の公式プロジェクトテンプレートを使用し、vue3+ts を使用して開発し、開発ツールとして vscode を使用します。

1. プロジェクトを作成し、コマンドラインから実行します。

1. 次のコマンドを使用してテンプレートプロジェクトを作成します。

公式の手順を参照してください

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

typescript で開発したプロジェクトを作成します (コマンドラインの作成に失敗した場合は、gitee に直接アクセスしてテンプレートをダウンロードしてください)

ここに画像の説明を挿入します
作成後、vscodeでプロジェクトを開きます

2. プロジェクトの依存関係パッケージをインストールする

pnpm i --force

ファイルmanifest.json内で WeChat アプレットの appid を構成します。

3. WeChat プログラムのバージョンにコンパイルします

pnpm dev:mp-weixin

4. コンパイルが成功すると、ディレクトリ dist/dev/mp-weixin が生成されるので、WeChat 開発者ツールを使用してこのディレクトリをインポートし、実行します。

2. vscode プラグインをインストールする

1. uni-create-view
ここに画像の説明を挿入します
2. uni-helper

3. uniapp アプレット拡張機能

質問

1. モジュール 'vue' またはそれに対応する型宣言.ts が見つかりません (2307)
上記の問題が発生する場合は、ts のバージョンに問題がある可能性が高くなります。ショートカットキー ctrl+shift+p を使用して検索タイプを開くと、次のように表示されます:
ここに画像の説明を挿入します
ワークベンチのバージョンを選択します:

3. ts タイプ検証を構成する

1. インストールタイプ宣言ファイル

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

2. tsconfig.json を構成する

{
    
    
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    
    
    "sourceMap": true,
    "useDefineForClassFields": true,
    "jsx": "preserve",
    "target": "ESNext",
    "baseUrl": ".",
    "ignoreDeprecations": "5.0",
    "verbatimModuleSyntax": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "paths": {
    
    
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    
    
    "experimentalRuntimeMode":"runtime-uni-app"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

4. JSON アノテーションの問題

uniapp にコメントを書くことは許可されていますがmanifest.json、 vscode にはデフォルトでエラーメッセージが表示されますが、これは次の設定で解決できます。pages.json

左下隅の設定を開き、「関連付け」を検索し、追加しますmanifest.json。pages.json
ここに画像の説明を挿入します