Vue3 を使用すると、半分の労力で 2 倍の結果のページ スタイルを作成できます CSS フレームワーク - Unocss の理解

はじめに: Vue3 を使用すると、半分の労力で 2 倍の結果のページ スタイルを作成できます CSS フレームワーク - Unocss についての理解

フロントエンド共通CSSフレームワーク

• Windics：https://cn.windicss.org/
• テイルウィンドCSS：https://tailwindcss.com/
• タキオン：https://tachyons.io/
• unocss：https://gitee.com/mirrors/unocss

ライティングスタイルがかつてないほど簡単になりました

• ネイティブの記述方法。最初にタグでクラスまたは ID を定義し、次に CSS スタイル シートにスタイルを記述する必要があります。

	.xd{
    
    
	  margin: 1px
	  width: 1px
	  height: 1px
	}

• unocss フレームワークを使用すると、クラスや ID を定義する必要がなく、タグにスタイルを直接記述するだけです。

<div m-1px w-1px h-1px> </div>

Unocss の概要

• 著者: Anthony Fu、vue および vite のコア開発メンバー
• https://zhuanlan.zhihu.com/p/425814828?utm_medium=social&utm_oi=31225867665408
• 定義: Unocss はフレームワークではなくエンジンです。コア ツール クラスを提供しないため、すべての機能はプリセットとインライン構成を通じて提供できます。
• アドバンテージ
  • 直感的でカスタマイズが簡単
  • 値のない属性付きスキーマ
  • 他のコンポーネント ライブラリ スタイルとの互換性の向上
  • パフォーマンスを損なうことなく柔軟性を実現