Framework Vant Weapp pour l'utilisation du programme WeChat Mini

vant utilise vant weapp dans l'applet WeChat, il existe deux façons d'installer et d'utiliser, via l'installation de npm, vous pouvez également importer directement le fichier dist

Un, installer via npm

Première étape de l'installation via npm

Notez que  package.json  et  node_modules  doivent être dans le   répertoire miniprogram

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

Étape 2 Construisez le package npm

Ouvrez les outils de développement WeChat, cliquez sur  Outils -> Construire npm et cochez l'   option Utiliser le module npm . Une fois la génération terminée, vous pouvez importer le composant.

 Troisième étape: modifiez tsconfig.json

Si vous utilisez dactylographié pour développer de petits programmes, vous devez ajouter la configuration suivante dans tsconfig.json pour éviter les erreurs de compilation tsc après la génération de npm

Veuillez le path/to/node_modules/@vant/weappmodifier dans le répertoire où se trouve @ vant / weapp dans le projet

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    }
  }
}

Étape 4 Modifier app.json

Après avoir supprimé app.json, la  nouvelle version des composants de base de l'"style": "v2"  applet est obligée d'ajouter de nombreux styles, qui sont difficiles à supprimer. Si vous ne le fermez pas, cela entraînera une certaine confusion dans le style des composants.

Introduire des composants 

// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

Utiliser des composants

Une fois les composants introduits, ils peuvent être utilisés directement dans wxml

<van-button type="primary">按钮</van-button>

 Deuxièmement, importer via des fichiers

Accédez à GitHub pour télécharger le code vant Weapp et dist copiez le  répertoire dans votre propre projet.

Le vant suivant est le fichier dist téléchargé

Utilisez ensuite les composants comme suit. Prenez Button comme exemple et affichez les autres composants sur la page de document correspondante:

1. Ajoutez les composants requis.

Configurez dans le json de la page (le chemin est configuré en fonction de l'emplacement de votre propre projet):

// index.json
"usingComponents": {
  "van-button":"../../components/vant/button/index"
}

2. Utilisez des composants dans wxml:

index.wxml

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>