Vant-weapp は uniapp+vue3 プロジェクトで使用されます

プロジェクトを作成する

vue-cli コマンドラインを使用してプロジェクトを作成する

Vue3/Vite バージョンにはノード バージョンが必要です^14.18.0 || >=16.0.0

uni-app公式サイト（dcloud.net.cn）

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

プロジェクトを開く

上部のメニューバーで「ターミナル」/「新しいターミナル」をクリックします。

インストール依存関係コマンドを実行する

yarn install 或 npm install

vant-weapp をインストールする

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

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

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

vant-weapp の導入

 ディレクトリ/src目录下の作成 中に wxcomponents

node_modules/@vant/weapp/dist フォルダーを次の場所にコピーします。wxcomponents文件夹

将dist文件夹改名为vant-weapp

 

 

HBuilder を使用して プロジェクトを作成する

Vant Weapp のソース コードを git 経由で直接ダウンロードし、 dist そのディレクトリを独自のプロジェクトにコピーします。

Vant-Weapp: Vant Weapp は、Youzan のモバイル コンポーネント ライブラリである Vant の小規模プログラム バージョンです。この 2 つは同じビジュアル仕様に基づいており、開発者が小規模なプログラム アプリケーションを迅速に構築できるように一貫した API インターフェイスを提供します (gitee.com)

git clone https://api.gitee.com/mirrors/Vant-Weapp.git

 

 ディレクトリ/src目录下の作成 中に wxcomponents

Vant-Weapp/dist フォルダーを次の場所にコピーします。wxcomponents文件夹

将dist文件夹改名为vant-weapp

App.vue に vant スタイルを導入する

<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
}
</script>

<style lang="scss">
  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
  @import "uview-plus/index.scss";
  @import "@/static/styles/index.scss";
  @import '@/wxcomponents/vant-weapp/common/index.wxss' //引入vant样式
</style>

Pages.json で導入

現地紹介

注: ボタン コンポーネントは 1 つのページに導入されました。他のページに導入されていない場合、他のページは使用できません。他のページで使用したい場合は、1 つのページのスタイル オブジェクト {} に導入する必要があります。 )

{
  "path": "pages/home/index",
  "style": {
    "navigationBarTitleText": "首页",
    "usingComponents": {
      "van-button": "/wxcomponents/vant-weapp/button/index"
    }
  }
}

 グローバルインポート

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uniapp",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8",
  "usingComponents": {
    "van-button": "/wxcomponents/vant-weapp/button/index"
  }
}

ページの使用

<template>
	<view class="content">
		<!-- uview-plus V3 -->
		<view>
			<view>uview-plus组件</view>
			<u-button type="primary" text="确定"></u-button>
			<u-button type="primary" plain text="镂空"></u-button>
			<u-button type="primary" plain hairline text="细边"></u-button>
		</view>
		<view style="height: 100rpx;display: flex;align-items: center;justify-content: center;">
			--------------------------------------------------------
		</view>
		<!-- Vant Weapp -->
		<view>
			<view>Vant Weapp组件</view>
			<van-button block type="default">默认按钮</van-button>
			<van-button block type="primary">主要按钮</van-button>
			<van-button block type="info">信息按钮</van-button>
			<van-button block type="warning">警告按钮</van-button>
			<van-button block type="danger">危险按钮</van-button>
		</view>
	</view>
</template>

<script setup>
import { onReady, onShow, onLoad } from '@dcloudio/uni-app'
</script>

<style lang="scss"></style>

共同ピット

このとき、コンソールはエラーを報告します

知らせ：

ミニ プログラムの詳細 > ローカル設定 > js を es5 にコンパイルします。そうしないと人気が高まります。

プロジェクトを再起動するだけです

最終効果