[uniapp] Développement de petits programmes, projet d'initialisation vscode

L'utilisation d'uniapp pour développer de petits programmes peut regrouper un code dans plusieurs petits programmes pour différentes plates-formes.
Ici, nous utilisons le modèle de projet officiel d'uniapp comme exemple, le développons en utilisant vue3+ts et utilisons vscode comme outil de développement.

1. Créez un projet et exécutez-le via la ligne de commande

1. Créez un projet de modèle via la commande suivante

Se référer aux instructions officielles

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

Créez un projet développé avec TypeScript (si la création en ligne de commande échoue, veuillez visiter gitee directement pour télécharger le modèle)

Insérer la description de l'image ici
Après la création, ouvrez le projet avec vscode

2. Installez les packages de dépendances du projet

pnpm i --force

manifest.jsonConfigurez l'applet WeChat appid dans le fichier

3. Compiler dans la version du programme WeChat

pnpm dev:mp-weixin

4. Une fois la compilation réussie, le répertoire dist/dev/mp-weixin sera généré. Utilisez les outils de développement WeChat pour importer ce répertoire et l'exécuter.

2. Installez le plug-in vscode

1. uni-create-view
Insérer la description de l'image ici
2. uni-helper

3. extension d'applet uniapp

question

1. Impossible de trouver le module 'vue' ou son type correspondant déclarations.ts (2307)
Si le problème ci-dessus se produit, il s'agit probablement d'un problème de version ts. Utilisez la touche de raccourci ctrl+shift+p pour ouvrir le type de recherche et il s'afficher comme suit : Sélectionner la
Insérer la description de l'image ici
version du workbench peut être :

3. Configurez la vérification de type ts

1. Fichier de déclaration du type d'installation

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

2. Configurez 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. Problèmes d'annotations JSON

manifest.jsonIl pages.jsonest permis d'écrire des commentaires dans uniapp . Il y aura un message d'erreur par défaut dans vscode, qui peut être résolu via la configuration suivante :

Ouvrez les paramètres dans le coin inférieur gauche, recherchez des associations, puis ajoutez manifest.jsonetpages.json
Insérer la description de l'image ici