[Vue.js]Vue CLI project(@vue/cli) でVue.jsプロジェクトを作成し、GitLabプロジェクトに登録する手順

新規でVue CLI(@vue/cli)のプロジェクトを作成する機会があったので、備忘までに手順を残しておきます。手順を忘れた頃に新たに作成し、その度はまることも多いので、一度整理したいと思った次第です。 作業前の状態 node, npm, @vue/cliのバージョンを確認しておきます。 いずれも、少し古いパッケージのようなので、最新化してからプロジェクトを作成することにします。 nodeの最新化 nコマンドを使って最新版(latest)をインストールしていきます。 インストールそのものは問題ありませんが、別途インストールしていたanacondaのパケッケージがactiveになっているようです。また、nコマンドで確認したところ、いくつかの古いバージョンが混在していますので、今回は環境をシンプルにするために16.0.0以外を削除しておきます。 nコマンドで古いバージョンを削除しましたが、anacondaのパッケージがactiveになっているようです。ここでは、anacondaのパッケージを削除することで、目的のv16.0.0をactiveにすることにします。 無事、目的である、最新のv16.0.0の導入が完了しました。 npm最新化 以下を参考にすすめていきます。 ここは、手順通りにすすめることで、問題なくnpmを最新化することができました。 @vue/cliの最新化 以下を参考にすすめていきます。 4.5.12が最新のはずですが、うまくいきませんでした。Pathを確認してみます。 これも、anacondaのパッケージが悪さをしているようですね。 パッケージが出てきませんでした。ディレクトリを直接確認してみます。 なにかのタイミングで作成されていたシンボリックリンク(エイリアス)が悪さをしているようです。これらをゴミ箱に入れます。 最新バージョンのインストールそのものは問題なかったようで、上記対処後、無事に@vue/cliも最新化できました。ここまでの状態を整理しておきます。 次に、Vue CLIプロジェクトを作成していきます。 Vue CLIプロジェクト作成 以下を参考にすすめていきます。 さっそく起動させてみます。ちなみに、私の環境ではsudoをつけないとうまく起動しなかったため、sudoをつけて実行しています。 それでは、このHello WorldアプリをGitLabのリポジトリに登録していきます。 GitLabへの登録 GitLabプロジェクト作成 GitLabにはいくつかの開発テンプレートを元にプロジェクトを作成することができるようになっていますが、Vue CLI向きのものは無いようなので、ブランクプロジェクトから作成していきます。 以下のサイトに行くと、4通りの方法からプロジェクトを作成するウィザードにたどり着きます。ここでは、Create blankを選択します。 プロジェクトの情報を以下の画面で入力し、Create Projectをクリックし、プロジェクトの作成を完了します。 GitLabにVue CLIで作成したファイル群を登録 GitLabでは複数ファイルのアップロードといったことができないため、プロジェクト作成後のプロジェクトトップ画面での指示に従って、以下の手順で進めます。 GitLabから作成した空のプロジェクトをClone Cloneしたディレクトリに、Vue CLIで作成したファイル群をコピー Cloneしたディレクトリに.gitignoreを追加登録 Vue CLI用の.gitignore Vue CLIで作成したプロジェクトには.ignoreが含まれないため、以下のサイトのファイルを初期ファイルとして使用させていただくことにします。 .ignoreファイルも加えた状態をVS Codeで表示しています。 GitLabにPush 最後にGitLabにPushしていきます。 Pushが終わると、GitLab上にファイル郡が表示されるようになります。 関連記事