vue + vuetify + GitHub プロジェクトセットアップ手順

vue + vuetify + GitHub のプロジェクト構築手順メモです。何度も実行するので最短手順を記録しておきます。自分用のメモなのであまり詳細には書いておりません。詳細が気になる方はコメントいただけたら追記いたします。

ポイント

• githubのリポジトリを先に作ることで npm init 時に情報取得
• vuecli をローカルインストールして使う

作業時の環境

CentOS 7.8

Node v12.14.1

npm v6.14.4

1.GitHubでリポジトリを作成

省略

2. プロジェクトフォルダへ clone

clone時にディレクトリが作成されるので、プロジェクトフォルダでそのままgit clone 実行（GitHubの）

$ git clone https://github.com/XXXXXX/XXXXXX.git

プライベートリポジトリの場合ユーザIDとパスワードを聞かれるので入力

3.プロジェクトフォルダへ移動してプロジェクトの初期化

$ cd XXXXX
$ npm init

clone を先にしておくことでgithubの情報が自動的に反映します。

4.vuecli のインストールとvue アプリケーションの作成

vuecli はグローバルインストールしたくないので、プロジェクトをいったん二重構成にします。

$ npm install @vue/cli -D
$ npx vue -V
@vue/cli 4.4.6

今回は同じリポジトリと同名でアプリケーションを作ります。（アプリ名でディレクトリが作られます。）

$ npx vue create [アプリ名]
$ cd [アプリ名]

設定はお好みで。

vuetifyのインストールでvuecliを使うのでアプリケーションディレクトリにも vuecli をインストールします。（二度手間・・・改善したい・・・）

$ npm install @vue/cli -D
$ npx vue -V
@vue/cli 4.4.6

5.vuetify の適用

vuetify をインストールするといろいろ勝手に書き換わるので必ず最初にします。

$ npx vue add vuetify

6.起動確認

$ npm run serve

vuetifyが適用されたHome.vueが表示されればvuetifyまで適用成功です。

7.プロジェクトマージ

最後にプロジェクトのディレクトリ構成を任意の形に整備してpushします。

現在の状態（いろいろ省略）

[project名]
├ .git
├ モジュール(vuecli)
├ package.json
└ [project名]
　 ├ モジュール(vuecli, vue, vuetify)
　 └package.json

vue単独構成

vueのみの開発を行う場合以下のようにディレクトリとpackage.jsonをマージしています。（フロントエンドのみの開発やコンポーネントカタログの作成等）

[project名]
├ .git
├ モジュール(vuecli, vue, vuetify)
└package.json

混合プロジェクト構成

バックエンドやバッチプログラムもセットでプロジェクト化する場合は以下のような構成にしています。

[project名]
├ .git
├ モジュール(vuecli等のcli)
├ package.json
├ client
│ └ [アプリ名]
│ 　├ モジュール(vuecli, vue, vuetify)
│ 　└package.json
├ api
│ └ [サーバー名]
│ 　├ モジュール(express等)
│ 　└package.json
├ batch
│　├ モジュール(express等)
│　├ バッチプログラム
│　└package.json
└ model

よりよい構成等お勧めがありましたら。ぜひコメントお願いします。

備忘録なので質問はあまり答えられないかもしれません。