Zenn
📝

Vue3 + Vite + Vuetify3で環境構築

2023/06/04に公開
Vuetify
Vue 3
Vite
tech

この記事の目標

  • Vue3
  • Vite
  • Vuetify3

上記を環境での開発を今後どんどんしていくので自分用のメモを含めてコンテンツを作成します
※Vueの環境は移り変わりが激しく(Vue2で便利だったNuxtは速攻で廃れました)今後もこの記事が役に立つとは限らないので激しい変化を確認したら新しい記事を更新します

環境構築に必要な事前準備の確認

事前準備で扱う物の説明や導入に関してはここでは省きます。

# OS: Windows10

# Node.js
node -v
v18.16.0
npm -v
9.5.1

# yarn
yarn -v
1.22.19

# vue
vue -V
@vue/cli 5.0.8

アプリケーションの作成

vueのプロジェクトにvuetifyを導入する工程になります

VueCLIを使ってプロジェクトを生成

基本的に質問に答えて生成してく感じになりますが、個人の好みの部分もあると思いますのでそこは変更していただいて問題ありません。

# vue-viviomegaの部分はプロジェクト名になるので好きに変更可能です
vue create vue-viviomega
Vue CLI v5.0.8

# Default ([Vue 3] babel, eslint)を選択すると必要最低限をが入り簡単ですが、自分は今回
「Manually select features」を選択する
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

# デフォルトで設定されているLinter / Formatterは開発する上で設定どうしが競合する部分があるので外します
# 後々入れることになる可能性のあるRouterとVuexはこの時点で導入しておく
? Please pick a preset: 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

# Vueはもちろん3.xを選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

# Yを選択
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)　Y

# Linter / Formatterけしてるので関係ないですが、「In dedicated config files」を選択する
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

# yを選択
? Save this as a preset for future projects? (y/N)y

# 特に入力なしで大丈夫
Save preset as:

下記表記でProjectが生成されたら完了です

Vue CLI v5.0.8
✨  Creating project in C:\Users\shuns\OneDrive\ドキュメント\Project\vue-viviomega.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 22.79s.
🚀  Invoking generators...
📦  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 7.89s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-viviomega.
👉  Get started with the following commands:

 $ cd vue-viviomega
 $ yarn serve
 
 # cd vue-viviomega でディレクトリを移動
 # yarn serve で起動

「yarn serve で起動すると下記ログがでます」

yarn run v1.22.19
$ vue-cli-service serve
 INFO  Starting development server...


 DONE  Compiled successfully in 3468ms                                                                           1:46:39

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.101:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
  
  # 上記のリンクで表示を確認

正常に動いていると下記画像のように表示されます
起動画面

Vuetify3を導入

デザインコンポーネントのVuetify3を導入する
今回のプロジェクトでは誰でも直感的に操作ができるUI/UXを目指すため導入必須とします。
オシャレなデザインを目指す場合は自分でコンポーネントを作成していく必要があります
https://vuetifyjs.com/en/

# 下記コマンドで実行
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 3.92s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

# Vuetify 3 - Vite (preview)で実行Viteは素早く最適化されるビルドツールになります
? Choose a preset: (Use arrow keys)
  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)

# yを選択
? Choose a preset: Vuetify 3 - Vite (preview)
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds
are intended for development testing and may include bugs or other issues.)
(y/N) y

🚀  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 13.01s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

# 導入が完了したら下記コマンドで起動します
yarn dev

成功していれば下記画面が表示されます
起動画面

まとめ

Vueの環境構築はバージョンが新しくなるたびに簡単になっていってる印象があります
質問に答えるだけでほとんどの作業が終わるので躓くポイントはないと思います。

下記が今回の記事で使ったプロジェクトになります
https://github.com/viviomega/vue-viviomega

Discussion