概要
過去に vue.js を HTML だけで試してみました
すべての機能を使うには vue cli を使ってプロジェクトを作成し UI を作成できるようにする必要があります
今回は vue cli でプロジェクトを作成し vue のプロジェクトを作成した上で vuetify という Vue.js で作成した UI にマテリアルデザインを当てることができる機能を試してみました
環境
- macOS 10.15.6
- nodejs 14.5.0
- yarn 1.22.4
- vue cli 4.4.6
- vuetify (vue-cli-plugin-vuetify) 2.0.7
yarn インストール
yarn じゃなくてもいいのですが長いものには巻かれろ精神なので yarn を使います
brew install yarn
vue cli のインストール
次に vue cli を使います
vue cli は vue で UI を作るためのプロジェクトを簡単に作成できるツールです
yarn global add @vue/cli
vue -V でバージョンが確認できれば OK です
プロジェクトを作成する
それでも Vue.js で UI を作成するためのプロジェクトを作成しましょう
vue create hello-world
インタラクティブでいろいろ聞かれますが今回は基本すべてエンターで次に進めば OK です
現行のバージョンだと 3 つほど聞かれて終了でした
? Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? Yes? Please pick a preset: default (babel, eslint)? Pick the package manager to use when installing dependencies: Yarn
vue のプロジェクトを作成すると git リポジトリも同時に作成されます
とりあえずコミットしておきましょう
git commit -m "Created new vue project"
とりあえずデモ画面を表示する
cd hello-worldyarn serve
localhost:8080 にアクセスするとデモ UI が表示されるのが確認できると思います
vuetify を使ってみる
まずはインストールしてみます
vue cli を使ってインストールできます
vue add vuetify
ここでもインタラクティブに聞かれますがエンターで OK です
デフォルトセッティングでいい感じに作ってくれます
とりあえず動かしてみる
vuetify にもデモページがあるので動かしてみましょう
yarn serve
先ほどと同じコマンドですが localhost:8080 にアクセスすると vuetify 用のデモ UI が表示されるのが確認できると思います
既存のレイアウトを適用してみる
ここにいろいろとレイアウトがあるので試してみましょう
今回は dark を試してみましょう
wget 'https://raw.githubusercontent.com/vuetifyjs/vuetify/master/packages/docs/src/layouts/layouts/demos/dark.vue' -O src/App.vueyarn serve
すると以下のような感じのダークモードな管理画面っぽいレイアウトが表示されるのが確認できると思います
少し書き換えてみる
先程のレイアウトのメイン部分を vuetify のデモ画面にでもしてみたいと思います
vuetify のデモ画面は src/components/HelloWorld.vue としてすでにテンプレートとして切り出されているのでこれを src/App.vue から参照してみたいと思います
まずは HelloWorld.vue を App.vue から参照する部分を書きます
vim src/App.vue
<template>
<v-app id="inspire">
<v-navigation-drawer v-model="drawer" app clipped>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Dashboard</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-cog</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app clipped-left>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<!-- ここを修正 -->
<v-main>
<HelloWorld></HelloWorld>
</v-main>
<v-footer app>
<span>© {{ new Date().getFullYear() }}</span>
</v-footer>
</v-app>
</template>
<script>
// コンポーネントを import
import HelloWorld from "./components/HelloWorld.vue";
export default {
// ここで使用するコンポーネントを定義する
components: {
HelloWorld
},
props: {
source: String
},
data: () => ({
drawer: null
}),
created() {
this.$vuetify.theme.dark = true;
}
};
</script>書き換えているのはコメントの部分だけです
まず v-main の部分です
ここを HelloWorld コンポーネントを参照するように変更しています
また script 部分でコンポーネントのインポートを行います
デモのダークモードのレイアウトには当然 HelloWorld のコンポーネントを参照する定義がないので追加しましょう
これで UI を確認すると以下のようにメイン部分が vuetify のデモ画面になっていることが確認できると思います
あとは HelloWorld.vue コンポーネントを書き換えればメイン部分の編集もできます
おまけ: lint をかける
yarn lint
おまけ: format するには
プロジェクトを作成する際に「Manually select features」を選択し「Pick a linter / formatter config」で「ESLint + Prettier」を選択します
正直これは設定しておいたほうがいいです
そしていつフォーマットするかでどちらかもしくは両方を選択しましょう
「Lint on save」はリント時に同時にフォーマットします
「Lint and fix on commit」は git commit 時にフォーマットします
最後に
Vue.js でマテリアルデザインを実現できるプラグインの vuetify を試してみました
当然ですが前提知識として Vue.js の仕組みや使い方を知っておく必要があります
vuetify 専用の v-hogehoge がたくさんあるのでそれらの使い方を学習しないと使いこなすのは難しそうです
0 件のコメント:
コメントを投稿