【Vue.js】vue-cliとVuetifyでサクッと新規プロジェクトを立ち上げる

ポートフォリオ公開用の簡単なSPAが作りたかったので、
vue-cliを使ってサクッと新規プロジェクトを立ち上げた。

環境

MacOS Catalina 10.15
vue 2.6.12
Node.js 14.2.0

vue-cli導入からプロジェクト作成まで

次のコマンドでvue.cliを導入する。そもそもvue-cliが何かはこちらを参照で。

npm install -g @vue/cli@3.5.0

この記事を書いている今の最新はv4.5.8なのですが、今回はバーション3で進めます。これでインストールは完了。続いてプロジェクトを作成します。

vue create my-portfolio

基本はデフォルトでいいと思いますが、
この段階でTypeScriptだったり、vue-routerを選択する事も可能です。

Vue CLI v3.5.0
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

バージョンによってはYarnかNPMを選択をさせられる場合がありますが、お好みで。

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-portfolio.
👉  Get started with the following commands:

 $ cd my-portfolio
 $ npm run serve

無事に作成出来ました。早速、 npm run serve でローカルで動作確認してみましょ。

はい、バチクソ簡単です。

Vuetify入れましょう

今回はサクッとがテーマなので、Vuetifyも使います。
vue-cliが入っていれば、以下コマンドでOKです。

vue add vuetify

これもデフォルトで良いと思います。

✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced)

npm run serveしてみましょ。

OKですね。
ちなみにこの段階でディレクトリ構成はこんな感じ。