ホームページ > ウェブフロントエンド > uni-app > uni-uiプロジェクトにColorUIを導入する方法を記録する

uni-uiプロジェクトにColorUIを導入する方法を記録する

青灯夜游
リリース: 2021-12-20 14:43:50
転載
3274 人が閲覧しました

ColorUI は、H5、WeChat アプレット、Android、ios、Alipay に適した、高品質で高度にカスタマイズされた CSS コンポーネント ライブラリです。では、uni-ui プロジェクトに ColorUI を導入するにはどうすればよいでしょうか?次の記事では、Uni-ui プロジェクトに ColorUI-UniApp プラグインを導入する方法を紹介します。

uni-uiプロジェクトにColorUIを導入する方法を記録する

# 1. uniapp プラグイン マーケットで ColorUI-UniApp プラグインを検索し、ダウンロードして解凍します。

uni-uiプロジェクトにColorUIを導入する方法を記録する

uni-uiプロジェクトにColorUIを導入する方法を記録する

uni-uiプロジェクトにColorUIを導入する方法を記録する

2. 以下に示すように、colorui ファイルを uni-ui プロジェクトのルート ディレクトリにコピーします。図:

uni-uiプロジェクトにColorUIを導入する方法を記録する

3. uni-ui プロジェクトの App.vue ファイル構成は次のとおりです:

uni-uiプロジェクトにColorUIを導入する方法を記録する

現在、uni-ui プロジェクトに ColorUI-UniApp が導入されていますプラグインの終了

4. カスタム ナビゲーション バー

cu-custom.vue構成は次のとおりです:

uni-uiプロジェクトにColorUIを導入する方法を記録する

main .js 構成は次のとおりです:

uni-uiプロジェクトにColorUIを導入する方法を記録する

Pages.json の構成は次のとおりです。

uni-uiプロジェクトにColorUIを導入する方法を記録する

5. ページの使用法は次のとおりです。

uni-uiプロジェクトにColorUIを導入する方法を記録する

ページのレンダリング:

uni-uiプロジェクトにColorUIを導入する方法を記録する

推奨事項: 「

uniapp チュートリアル

以上がuni-uiプロジェクトにColorUIを導入する方法を記録するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート