【2023年6月時点】yarnを使ったVue3の環境構築手順

概要

Viteを使ってVue3の環境構築する手順です。

前提

パッケージ管理にはyarnを使っています。

またJavaScriptではなくTypescriptを使用します。

Viteとは

Viteは速く無駄のない開発体験を提供するビルドツールで、高速なホット・モジュール・リプレースメント（HMR）や最適化された静的アセットの出力を特長としています。

Viteはデフォルトで賢明な設定があり、JavaScript APIやプラグインAPIによる拡張も可能です。

環境構築手順

プロジェクトの作成

yarn create vite {プロジェクト名を入れる} --template vue-ts

コマンド例

yarn create vite my-page --template vue-ts

各種ライブラリの追加

yarn add [パッケージ名]で最新バージョンをインストールできます。

バージョンの指定が必要な場合はyarn add [パッケージ名]@[バージョン]のように@の後ろにバージョンを記載します。

vue-router

yarn add vue-router

Pinia

yarn add pinia

Vuetify

yarn add vuetify

作成したリポジトリでyarn devコマンドを実行して払い出されたエンドポイントへアクセス

おまけ

Vuetifyを入れる場合は次のコマンドでOKです

yarn create vuetify

上の手順で入れたライブラリはEssentialsを選択することで自動インストールされます。

? Which preset would you like to install? › - Use arrow-keys. Return to submit.
    Default (Vuetify)
    Base (Vuetify, VueRouter)
❯   Essentials (Vuetify, VueRouter, Pinia)
    Custom (Choose your features)

TypeScriptの選択もできます。

✔ Which preset would you like to install? › Essentials (Vuetify, VueRouter, Pinia)
? Use TypeScript? › No / Yes

ただし、中身は全く同じではないので注意です。yarn create vuetifyで実行した場合はVuetifyのバージョンは3.0.0になっています。要件に応じて使い分けが必要になりそうです。

環境構築手順通りに実行したときのpackage.jsonの中身

{
  "name": "xxxxxxxxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.1.4",
    "vue": "^3.2.47",
    "vue-router": "^4.2.2",
    "vuetify": "^3.3.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

yarn create vuetify実行したときのpackage.jsonの中身

{
  "name": "yyyyyyy",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "core-js": "^3.29.0",
    "pinia": "^2.0.0",
    "roboto-fontface": "*",
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/types": "^7.21.4",
    "@types/node": "^18.15.0",
    "@types/webfontloader": "^1.6.35",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.37.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.60.0",
    "typescript": "^5.0.0",
    "vite": "^4.2.0",
    "vite-plugin-vuetify": "^1.0.0",
    "vue-tsc": "^1.2.0"
  }
}