数多くの機能を持つデザインフレームワーク　Arco Design

趣味でやるプログラミングでは、できるだけ学習する対象を絞っていきたいところ。私の場合は、デザイン面（CSS）の学習が後回しになりがちでした。

これまではVuetifyに頼っていたのですが、なかなかVue3に対応していなかったこともあって、別のデザインフレームワークを探していたところ、見つけたのがこの Arco Designです。

提供元はTikTokで有名なバイトダンス（字節跳動）が培ってきたUIキットがオープンソースとなって公開されたのです。

ReactとVueではコンポーネントで使えるようになっています。

導入も非常に簡単で、オフィシャルページにあるとおり

yarn add --dev @arco-design/web-vue

としてVue3のプロジェクトフォルダにパッケージをインストールした上で、 main.tsを以下のとおり書き換えればOKです。

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';  // この行を追加
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';  // この行を追加

const app = createApp(App);
app.use(ArcoVue);  // この行を追加
app.mount('#app');