vue + vuetify + GitHub プロジェクトセットアップ手順
vue + vuetify + GitHub のプロジェクト構築手順メモです。何度も実行するので最短手順を記録しておきます。自分用のメモなのであまり詳細には書いておりません。詳細が気になる方はコメントいただけたら追記いたします。
ポイント
作業時の環境
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
よりよい構成等お勧めがありましたら。ぜひコメントお願いします。
備忘録なので質問はあまり答えられないかもしれません。
ブログテスト
書き心地のテスト中です。 もうしばしお待ちください。
マークダウンテスト
リスト
- あいうえお
- かきくけこ
- さしすせと
- たちつてと
ソース
java:title code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
引用
引用 のテスト