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

# これはなに

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



# CLI をインストール

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

```console
npm install @vue/cli -g
```

# プロジェクトを生成

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

```console
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」と答えればよい](https://qiita.com/jesus_isao/items/0b305c7d90c45ad66c1b)そうです


# 開発サーバを起動

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

```console
cd hello-world
npm run serve
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/739d3d05-119f-242c-94f8-ae94dc2172e1.png)

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

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

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

| フレームワーク | 3.x サポート | TypeScript型定義  | GitHubスター数[^1] |
|:--|:-:|:-:|:-:|
| [Vue Material](https://vuematerial.io/) | [In progress](https://github.com/vuematerial/vue-material/issues/2277) | なし | 9.2k | 
| [Vuetify](https://vuetifyjs.com/en/) | [2021年Q3リリース予定](https://vuetifyjs.com/en/introduction/roadmap/) | なし | 29.5k |
| [Vue MDC Adaptor](https://github.com/pgbross/vue-material-adapter) | [No](https://github.com/pgbross/vue-material-adapter/issues/170) | なし | 57
| [Material Components Vue](https://matsp.github.io/material-components-vue/) | No ? | なし | 316
| [BalmUI](https://material.balmjs.com/#/) | [Yes](https://next-material.balmjs.com/#/) | なし | 121

[^1]: 2020年2月11日現在

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

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

# BalmUI for Vue3をインストール

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

```console
npm install balm-ui@next --save
```

# BalmUIをインポート

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

CSSを読み込みます。

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

BalmUIとBalmUIPlusをuseします。

```ts
// 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](https://next-material.balmjs.com/#/layout/top-app-bar) を使ってみます。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/c101a274-7303-b8d1-1e9a-f0d129ec1618.png)

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

# 続きます

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

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