イントロ
皆さん、CSSライブラリは使ったことがありますか?
もちろん、自身で全てのUIデザインを一から作ることができれば素晴らしいのですが、そんな時間はありません!
CSSライブラリで有名なのはBootstrapとかTailwindがありますね。
今日は、Vueのバージョン3に対応したAnt Designを使ってみます。
Vue3に対応していないCSSライブラリ
ここで2つ注目したいCSSライブラリを紹介しておきます。
これらはまだVue3に対応していないので今後のリリースが待ち遠しいですね。
- Bootstrap-Vue https://bootstrap-vue.org/
- Vuetify https://vuetifyjs.com/en/
Ant Designとは
Ant DesignはReactのUIデザインのライブラリを提供していることでも知られているCSSライブラリです。
特にVueに対応したライブラリは通常のBootstrapとかと違い、データの扱いが少し楽になっているので今日、それを試してみたいと思います。
公式サイト
https://www.antdv.com/docs/vue/introduce/
Ant Designのインストール
今日はWebデベロッパーから満足度の高いViteを使って環境を作ります。
ViteはVue Cliに代わるデベロップメントツールのことです。
特にBabelというコンパイラを除いたことでめちゃちゃ早くなりました。
その代わりに古いブラウザでのサポートができなくなるとかのデメリットもありますが、それはいたしかたないでしょう。
まずはVueアプリを作ります。
npm create vite@latest
では初期状態のVueアプリが起動できることを確認しましょう。
それから、Ant Designのライブラリをインストールします。
npm install ant-design-vue@next --save
では、後からエラーが出るのでこれも入れておきましょう。
エラーが見たい人は出たら入れてください。
npm i vite-plugin-components -D
http://localhost:3000/
npm run dev
ライブラリのインポート
ではmain.jsからライブラリをグローバルにインポートします。
コンポーネントからインポートしたい人はそのやり方も可能です。
import { DatePicker } from "ant-design-vue"; app.use(DatePicker);
CSSライブラリもインポートしましょう。
カレンダーをインポートしたい場合。
import DatePicker from "ant-design-vue/lib/date-picker"; // for js import "ant-design-vue/lib/date-picker/style/css"; // for css
Viteのデベツールのコンフィグファイルを更新して使えるようになります。
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'; export default { plugins: [ /* ... */ ViteComponents({ customComponentResolvers: [AntDesignVueResolver()], }), ], };