uniapp で uView を使用する方法 --- 超詳細

ステップ 1 :

HBuilder で [ツール] をクリックし、プラグインのインストールを見つけます。

以下をクリックして、このチュートリアルの2 番目のステップにリンクすることもできます。

uView2.0がリリースされ、剣は抜かれ、世界はひとつになる - DCloudプラグインマーケット

プラグインのインストールポップアップウィンドウに入り、クリックしてプラグインマーケットに移動してインストールします。

ステップ 2 :

プラグイン市場への参入

1. まずログインします

2. ユニバーサルプラグインを選択します

1.検索バーに「uView」と入力します

2. クリックしてダウンロード

3. クリックしてHBuilderX を使用してプラグインをインポートします

4. プロンプトボックスが表示されたら、クリックして HBuilder X を開きます

5. uView をインストールする必要があるプロジェクトを選択します

6. 「OK」をクリックします。

------>>ダウンロードが完了すると、このディレクトリが表示されます。

ステップ 3 :

ユニアプリを構成します。

1. main.jsファイルに移動して、uView を登録します(行 6、行 7)。これは vue の後にある必要があります。

import App from './App'

// #ifndef VUE3
import Vue from 'vue'

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

Vue.config.productionTip = false
App.mpType = 'app'
.......

2.コードの 7 行目をuni.scssファイルに貼り付けます。

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

@import '@/uni_modules/uview-ui/theme.scss';

.....

3. 最後に、pages.json ファイルに easycom を登録します。このコードは

"easycom": {
    "autoscan": true,
    "custom": {
        "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
    }
},

4. 完了しました。6行目のボタンコンポーネントコードを使用して試してみてください。

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{
    
    {title}}</text>
            <u-button text="月落"></u-button>
        </view>
    </view>
</template>

uniapp で uView を使用する方法 --- 超詳細

おすすめ