イントロ

皆さん、CSSライブラリは使ったことがありますか？

もちろん、自身で全てのUIデザインを一から作ることができれば素晴らしいのですが、そんな時間はありません！

CSSライブラリで有名なのはBootstrapとかTailwindがありますね。

今日は、Vueのバージョン３に対応したAnt Designを使ってみます。

Vue3に対応していないCSSライブラリ

ここで２つ注目したいCSSライブラリを紹介しておきます。

これらはまだVue３に対応していないので今後のリリースが待ち遠しいですね。

• 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()],

    }),

  ],

};