uniapp vue3 versión + ts usa la biblioteca de componentes del subprograma vant

1. Primero descargue la plantilla vue3 versión + ts del sitio web oficial de uniapp

2. Instale la versión del subprograma vant WeChat

npm i @vant/weapp

3. Cree la carpeta wxcomponents en el directorio src del proyecto y cree la carpeta vant en la carpeta wxcomponents.

4. Desde weapp en la carpeta @vant en la carpeta node_modules y la carpeta dist en weapp, copie los archivos en la carpeta dist a /wxcomponents/vant

5. Referencia global:  agregue los siguientes fragmentos debajo pages.jsondel archivo y   los atributos, y podrá introducir componentes específicos que deben introducirse globalmente según sea necesario. Las reglas de introducción son las siguientes:"globalStyle":{}

Tenga en cuenta que la ruta de importación debe cambiarse a la ruta correcta, como /wxcomponents/vant

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

 ejemplo

"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. Referencia de una sola página: agregue componentes en la configuración de la página

"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. Durante el proceso de desarrollo, debe consultar la versión correspondiente del documento: vant-contrib.gitee.io/vant-weapp  , pero debe cambiar la sintaxis de referencia correspondiente a la sintaxis de vue, como por ejemplo:

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>

Esto esta hecho