[Vue.js] Vue.js 3.x + TypeScript + マテリアルデザイン ことはじめ その1

これはなに

Vue.jsを個人的に始めてみた記録です。

CLI をインストール

プロジェクトの雛形を生成するため、CLIを使います。

npm install @vue/cli -g

プロジェクトを生成

インストールしたCLIを使って雛形を生成します。

vue create hellow-world

質問がいくつか表示されるので答えていきます。

✅を付けたところが、選択した回答です。

• Please pick a preset
  • Default ([Vue 2] babel, eslint)
  • Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  • ✅ Manually select features
• Check the features needed for your project
  • ✅ Choose Vue version
  • ✅ Babel
  • ✅ TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • ✅ Linter / Formatter
  • ✅ Unit Testing
  • E2E Testing
• Choose a version of Vue.js that you want to start the project with
  • 2.x
  • ✅ 3.x (Preview)
• Use class-style component syntax?
  • Yes
  • ✅ No
• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
  • ✅ Yes
  • No
• Pick a linter / formatter config
  • ✅ ESLint with error prevention only
  • ESLint + Airbnb config
  • ESLint + Standard config
  • ESLint + Prettier
  • TSLint (deprecated)
• Pick additional lint features
  • ✅ Lint on save
  • Lint and fix on commit
• Pick a unit testing solution
  • Mocha + Chai
  • ✅ Jest
• Where do you prefer placing config for Babel, ESLint, etc.?
  • ✅ In dedicated config files
  • In package.json
• Save this as a preset for future projects?
  • Yes
  • ✅ No

Use class-style componentは「No」と答えればよいそうです

開発サーバを起動

生成したプロジェクト内で開発サーバを起動します。

cd hello-world
npm run serve

http://localhost:8080/ へアクセスします。

こんなん表示されました。

マテリアルデザインライブラリどれにしよう？

Vue.jsでマテリアルデザインをする場合、選択肢がいくつもあるようです。
Angularみたいな公式はないのかな？

フレームワーク	3.x サポート	TypeScript型定義	GitHubスター数1
Vue Material	In progress	なし	9.2k
Vuetify	2021年Q3リリース予定	なし	29.5k
Vue MDC Adaptor	No	なし	57
Material Components Vue	No ?	なし	316
BalmUI	Yes	なし	121

Vuetifyが最人気のようですね。

いずれもTypeScriptの型定義は存在しない様子。

BalmUI for Vue3をインストール

Vue 3対応で、一番簡単にインストールできそうなBalmUIを入れてみます。

npm install balm-ui@next --save

BalmUIをインポート

src/main.ts を変更します。

CSSを読み込みます。

import "balm-ui/dist/balm-ui.css";

BalmUIとBalmUIPlusをuseします。

// eslint-disable-next-line @typescript-eslint/no-var-requires
const BalmUI = require("balm-ui");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const BalmUIPlus = require("balm-ui/dist/balm-ui-plus");

createApp(App)
  .use(BalmUI)
  .use(BalmUIPlus)
  .mount("#app");

型定義がないので eslintの警告をオフにしてrequire しています。

アプリケーションバーを使ってみる

Top App Bar を使ってみます。

<template>
  <ui-top-app-bar type="1">Vue.js ことはじめ</ui-top-app-bar>
</template>

こんなん表示されました。

続きます

長くなりましたので、一旦ここで終わります。

次はコンポーネント間のデータ渡しのやりかたと、ルーティングについて試してみたいと思います。

---

1. 2020年2月11日現在 ↩