la version uniapp vue3 + ts utilise la bibliothèque de composants d'applet vant

1. Téléchargez d'abord la version vue3 + le modèle ts depuis le site officiel d'uniapp

2. Installez la version de l'applet vant WeChat

npm i @vant/weapp

3. Créez le dossier wxcomponents dans le répertoire src du projet et créez le dossier vant sous le dossier wxcomponents.

4. Depuis le dossier weapp dans le dossier @vant sous le dossier node_modules et le dossier dist sous weapp, copiez les fichiers du dossier dist dans /wxcomponents/vant

5. Référence globale :  ajoutez les fragments suivants sous pages.jsonle fichier et   les attributs, et vous pourrez introduire des composants spécifiques qui doivent être introduits globalement selon les besoins. Les règles d'introduction sont les suivantes :"globalStyle":{}

Notez que le chemin d'importation doit être remplacé par le chemin correct, tel que /wxcomponents/vant

"usingComponents": {
   "van-cell-group": "/wxcomponents/vant/cell-group/index",
   "van-field": "/wxcomponents/vant/field/index",
   //...
}

 exemple

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "usingComponents": {
      "van-cell-group": "/wxcomponents/vant/cell-group/index",
      "van-field": "/wxcomponents/vant/field/index",
      "van-button": "/wxcomponents/vant/button/index"
      //...
    }
  }

5. Référence d'une seule page : ajoutez des composants dans la configuration de la page

"pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "usingComponents": {
          "van-cell-group": "/wxcomponents/vant/cell-group/index",
          "van-field": "/wxcomponents/vant/field/index",
          "van-button": "/wxcomponents/vant/button/index"
          //...
        }
      }
    }
  ],

6. Pendant le processus de développement, vous devez vous référer à la version correspondante du document : vant-contrib.gitee.io/vant-weapp  , mais vous devez modifier la syntaxe de référence correspondante en syntaxe de vue, telle que :

1. <van-cell-group>
       <van-field value="{
        
        { value }}" placeholder="请输入用户名" border="{
        
        { false }}"
       bind:change="onChange" />
   </van-cell-group>
   
   改为
   
   <van-cell-group>
       <van-field :value="value" placeholder="请输入用户名" :border="false"
       @change="onChange" />
   </van-cell-group>

C'est fait