前回はフロントエンドを構築するために Vue.js をセットアップしましたが、続いて、Vue.js で手軽に使用することができるCSSフレームワークとして「Vuetify」の導入方法をポストしたいと思います。
前回が妙に長かったので、今回は短めです。
13. Vuetifyの導入
Vuetifyとは
まずは「Vuetify」の概要から。
Vuetify（ビューティファイ）は、JavaScriptフレームワークであるVue.jsに対応したCSSフレームワークの一種で、Webアプリケーションのユーザーインターフェース（UI）を設計するためのツールです。
Vuetifyの特徴は次のとおりです。
- Googleが提唱したマテリアルデザインに準拠している
- レイアウトを構築するグリッドシステムからボタンなどの細かいパーツまで幅広くUIを提供している
- すぐに使えるコンポーネントが用意されているため、自分で作成する手間が省ける
- PC/スマートフォン両方サポートしているため、スマホ対応が可能になる
- デザインスキルが無くてもそれなりにオシャレな見た目のVueアプリが作れる
VuetifyはMITライセンスの下でリリースされた無料のオープンソースプロジェクトで、ソースコードはGitHubで利用できます。開発者がその開発に貢献することを選択した場合に変更することもできます。
Vuetifyのサポートを受けるには、Discordコミュニティに参加したり、GitHub ディスカッションで質問したり、Vuetifyから Direct Support を取得したりすることができます。
13-1. Vuetifyのインストール
手順１
プロジェクトの vue ディレクトリで Vuetify をインストールします。下記コマンドを実行。
|
1 |
(venv) ~/vue $ vue add vuetify |
手順２
どのプリセットを選択するか聞かれるので、今回は Vite ではなく Vuetify 3 – Vue CLI (preview) を選択してみます。
|
1 2 3 4 5 6 |
? Choose a preset: Vuetify 2 - Configure Vue CLI (advanced) Vuetify 2 - Vue CLI (recommended) Vuetify 2 - Prototype (rapid development) Vuetify 3 - Vite (preview) ❯ Vuetify 3 - Vue CLI (preview) |
手順３
nightly buildをインストールするかを尋ねられるので、No を選択。
|
1 2 |
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) (y/N) |
インストールが成功すると以下のようなメッセージが表示されます。
|
1 2 3 4 |
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify vuetify Discord community: https://community.vuetifyjs.com vuetify Github: https://github.com/vuetifyjs/vuetify vuetify Support Vuetify: https://github.com/sponsors/johnleider |
13-2. vue.config.jsの設定
vue.config.js に
transpileDependencies: [“vuetify”],
を追加します。
vue/vue.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const BundleTracker = require("webpack-bundle-tracker"); const path = require("path"); module.exports = { publicPath: "http://127.0.0.1:8080/", outputDir: "./dist/", transpileDependencies: ["vuetify"], // ←★(13-2)追加 chainWebpack: (config) => { config .plugin("BundleTracker") .use(BundleTracker, [ { path: path.resolve(__dirname, 'dist'), filename: 'webpack-stats.json' } ]); config.output.filename("bundle.js"); config.optimization.splitChunks(false); config.resolve.alias.set("__STATIC__", "static"); }, devServer: { hot: true, https: false, allowedHosts: 'all', headers: { "Access-Control-Allow-Origin": ["*"] }, watchFiles: { paths: ['src/**/*', 'public/**/*'], options: { usePolling: true, }, }, }, }; |
13-3.フロントエンド起動
バックエンドサーバの起動を行い、次に vue ディレクトリで vue.js を起動させます。
|
1 2 3 4 5 6 7 |
(venv) ~/vue $ npm run serve > frontend@0.1.0 serve > vite preview ➜ Local: http://localhost:4173/ ➜ Network: use --host to expose |
バックエンド用のURLへアクセスします。
http://localhost:8000/
Vuetify3 のトップページにアクセスできました。
今回は短めにということで、以上です。
関連するポスト
