小さなプログラム開発はvantライブラリを使って、順を追って詳しく説明、初めて使う方にもわかりやすい

Vant は、Youzan のフロントエンドチームによって開発されたオープンソースのモバイルコンポーネントライブラリで、2017 年に公開され、5 年間維持されています。Vant は、Youzan のすべてのコアビジネスを社内で担い、社外で 100,000 人以上の開発者にサービスを提供しており、業界で主流のモバイルコンポーネントライブラリの 1 つです。

ここにヴァントアプレットバージョンのアドレスがあります。クリックして直接入力し、ヴァントを参照してください

ステップ 1: アプレットを作成した後、ルートディレクトリを開いて新しいプロジェクトを作成します
ここに画像の説明を挿入
ステップ 2: cmd を介して現在のプロジェクトを実行します

ステップ 3: 現在のプロジェクトを初期化します

命令：npm init

ここに画像の説明を挿入
初期化完了ステータス:

この時点で、フォルダー内にさらに 2 つの構成ファイルが見つかります。

ステップ 4: vant パッケージをダウンロードします
現在のプロジェクトのルートディレクトリにコマンドを入力して、
npm ダウンロードコマンドをダウンロードします: npm i @vant/weapp - S - -production
cnpm download コマンド: cnpm i @vant/weapp -S --production は
ダウンロード後に依存パッケージ node_modules を生成します
ここに画像の説明を挿入

ステップ 5: ミニプログラムをインストールする
npm ダウンロードコマンド: npm i miniprogram-sm-crypto --production
cnpm ダウンロードコマンド: cnpm i miniprogram-sm-crypto --production

ステップ 6: 構成を変更します (ここで重要です。省略しないでください)。

①: app.json のコードの "style": "v2" 行を削除します (理由は、新しいバージョンのアプレットでは、基本コンポーネントに多くのスタイルが追加されており、上書きが困難であり、閉じられていない場合、一部のコンポーネントのスタイルが混乱します) ②:
ここに画像の説明を挿入
使用 WeChat 開発者ツールで作成されたプロジェクトの場合、miniprogramRoot はデフォルトで miniprogram になり、package.json はその外にあるため、npm ビルドが正常に動作しません。開発者ツールが npm が依存する場所に正しくインデックス付けできるように、project.config.json に次の構成を手動で追加する必要があります。


{
  ...
  "setting": {
    ...
    "packNpmManually": flase,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }

ステップ 7: npm ツールをビルドする
WeChat 開発者ツールを開き、マウスをツール列に移動し、Npm を見つけてビルドし、クリックします
ここに画像の説明を挿入

ステップ 8: ここでコンポーネントを使用して
vant を構成します。開発の別のページの下で json ファイルはオンデマンドで導入できます.
例: インデックスページでボタンボタンを使用する必要がある.次のように、 json ファイルでボタンをインポートし、
ここに画像の説明を挿入
index.wxml でスタイルを使用できます。

その後、オンデマンドインポートを開始し、さまざまな機能 API に従って使用できます。

PS: 新しいプロジェクトを作成した後、WeChat 開発者ツールを入力すると、一部の既定のバージョンでは古いバージョンが使用され、エラーが報告されます。開発のために新しいバージョンに変更することを忘れないでください。

WeChat 開発者ツールを開く - [詳細] - [ローカル構成] - [基本ライブラリのデバッグ (選択)
ここに画像の説明を挿入

小さなプログラム開発はvantライブラリを使って、順を追って詳しく説明、初めて使う方にもわかりやすい

おすすめ