葛のメモ帳

自分で調べたことを忘れないためにメモっておきます

葛のメモ帳

自分で調べたことを忘れないためにメモっておきます

【Vue2 + TypeScript + Vuex3 + Vuetify + Router】今更Vue2のプロジェクトを作る【2023 GW Day 2】

Vue2を振り返る

setup / update

Homebrew

brew update

Node.js

  • nodebrewをhomebrew経由でインストールして管理しています
    • 使うnodeのバージョンでかなり異なる結果になるので気をつける必要がありますが今回は以下を使いました
$ nodebrew ls
v16.20.0

current: v16.20.0
  • nodeのversionが変わっていることを確認します
node -v
v16.20.0

npm update

  • version確認
$ npm -v
9.6.5
  • update
$ npm update -g npm
  • check
$ npm -v
9.6.5

install Vue CLI

npm install -g @vue/cli
$ vue --version
@vue/cli 5.0.8

Create Vue2 Project

  • 今回は以下の構成で作成しました。
$ vue create vue2-project
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills,
 transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in 
production) No
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn
Please pick a preset: Manually select features
  • 手動で環境を構築していきます。
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
  • Bable
    • 新しいバージョンの書き方で書いたJavascritpコードを古いバージョンでも互換して動くように変換するコンパイラツール
    • ECMAScriptとは
  • Vue Router
    • Vue.jsを利用したSPA構築で、ルーティング制御をするための公式プラグイン
    • SPA: シングルページアプリケーション
  • Vuex
    • Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリ
  • Linter
    • ソースコードを静的解析し、問題点を指摘、または自動でフォーマットするツールのこと
? Choose a version of Vue.js that you want to start the project with 2.x
  • Vue2を使う
? Use class-style component syntax? Yes
  • 使うのは Class-style componentを使います。

ちなみに...

  • Object Style
    • Vue.extend()を用いた書き方
  • Class Style
    • class MyComponent extends Vueとする書き方
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

  • VueをTypeScriptかつクラス属性で書くためのツールをインストールする。

  • TypeScriptと一緒にbabelを使用するか？下記オプションが付与される。

    • Babel
      • 古いブラウザ用にJSを下位互換するツール
    • modern mode
      • 下位互換した時にコードが長くなりすぎないよう最適化する
    • polyfills
      • 更新されてなくなってしまったJSライブラリを自動保管する（JSはバージョンが更新される毎にライブラリが一変する）
    • transpiling JSX
      • JSXをトランスパイルする

ちなみに

  • JSX

  • ? Use history mode for router? (Requires proper server setup for index fallback in production) No

    • vue-routerで作成された（SPA）ページのURLは/#/でページ内容を切り分ける。これをハッシュモードという。
    • これに対し、各ページに個別のURLを振り分けるのがhistoryモード。

  • ? Pick a linter / formatter config: Prettier

    • Prettierを使います

  • ? Pick additional lint features: Lint on save

    • 保存時にlintが動く

  • ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json

    • Babel、ESLintなどのconfigファイルをどこにおくか。
    • In package.json・・・nodeの管理ファイルpakage.jsonに書き込む。

  • ? Save this as a preset for future projects? No

    • ここまでの設定を次回プロジェクト立ち上げのために保存しておくかどうか。

  • ? Pick the package manager to use when installing dependencies: Yarn

    • yarnを使う

Vuetify install

vue add vuetify
$ vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-vuetify@2.5.8
info All dependencies
├─ interpret@1.4.0
├─ null-loader@4.0.1
├─ rechoir@0.6.2
├─ shelljs@0.8.5
└─ vue-cli-plugin-vuetify@2.5.8
✨  Done in 2.78s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Vuetify 2 - Vue CLI (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 3.64s.
⠙  Running completion hooks...
/Users/USERNAME/dev/vue2/vue2-project/src/views/HomeView.vue
  10:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

  • コンポーネント名 "Home "は常に複数ワードでなければならない ので以下を変更してください

  • src/views/HomeView.vue

-  name: "Home",
+  name: "HomeView",

最後に

  • モック：Mock Service Worker
  • テストツールなども導入して基本的な構成をしてみたいですね

参考文献