これはなに

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スター数¹
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>

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

続きます

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

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

2020年2月11日現在 ↩