はじめに
Vueを勉強しはじめたものの、開発環境をセットアップするために方法がありすぎて迷子になってしまったため、自分用にまとめました。
Vue3、Vuetify、VueRouterをインストールすることで、フロント側の開発環境をセットアップする手順です。
セットアップ方法
前提条件
ローカルのバージョンは下記のとおりです。
OS：MacOS Monterey
Node:v16.17.0
npm:8.15.0
vue:@vue/cli 5.0.8
プロジェクト作成（Vue3のインストール）
下記コマンドを実行する。どのバージョンのVueを使用するかなどが聞かれるので、Vue3を選択する。その他はお好みで。
vue create my-app
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
で3.xを選択する。
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
# 3.xを選択する
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
? 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? (y/N) N
Vuetifyのインストール
Vuetifyはv2とv3があるようですが、Preview版のv3をインストールします。
vue add vuetify
Vuetify 3 - Vue CLI (preview)を選択する。
? Choose a preset:
Vuetify 2 - Configure Vue CLI (advanced)
Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
Vuetify 3 - Vite (preview)
❯ Vuetify 3 - Vue CLI (preview)
VueRouterのインストール
VueRouterはインストール時に特に選択肢などはありません。
vue add router
画面確認
下記コマンドを実行後、localhostにアクセスする。
http://localhost:8080
npm run serve
Vuetifyの画面が表示される。
おわりに
VueCLIの開発環境でつまったため、まとめてみました。Nuxt.jsとかも便利という噂を聞くので使ってみたいです....。