はじめに
今回はVue.jsを使ってポートフォリオを作成する方法を紹介します。
開発環境の構築からコーディングなど数回に分けて紹介していきますので、ぜひご覧ください。
また、今回作成するポートフォリオの完成形はコチラになります！
さて、今回のテーマは「開発環境の構築」です。参りましょう！！
システム構成について
今回のポートフォリオを作成するにあたっては次の画像のような構造を考えていきます。
Vue.jsを用いてフロントエンド開発を行い、デプロイ先としてGitHub Pagesを利用します。
Vue.jsのインストール
１. Node.jsのインストール
Vue.jsをインストールするには npm というものをインストール必要があります。
npm を単体でインストールする形でもいいのですが、Vue.jsに必要なNode.jsをインストールすることで自動的に npm もインストールすることができるのでそちらを利用します。
Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc…
こちらのサイトにアクセスしてください。
左側の「安定版」をダウンロードしてください。
ダウンロードしたパッケージファイルをインストールしてください。
インストールが完了したらコンソールを開いて次のコマンドを実行します。
npm --versionコマンドを実行して次のように npm のバージョンが表示されれば成功です。
7.20.32 . Vue CLI のインストール
npm のインストールが完了したら、続いて Vue CLI のインストールをしていきます。
次のコマンドを実行してください。
npm install -g @vue/cliここで -g はグローバルにインストールすることを意味しています。
今後もVueを使って開発を行いたい場合は -g をつけてインストールすることをお勧めします。
インストールが完了したら次のコマンドを実行してください。
vue --versionコマンドを実行した際に次のようにバージョンが結果として表示されていればインストールが成功です。
@vue/cli 4.5.12Vue.jsプロジェクトの作成
ここまででVue.jsで開発を行うための環境の構築が完了したので、プロジェクトの作成を行なっていきます。
Vue UI の起動
コンソールを開いて次のコマンドを実行してください。
vue uiブラウザが起動して「Vue プロジェクトマネージャ」が開きます。
Vueプロジェクトの設定
ページ上部の中から「作成」をクリックしてください。
ページが切り替わるのページの下部にある「ここに新しいプロジェクトを作成する」をクリックしてください。
プロジェクトの設定を記述する画面に変わりますので、今回は次のように設定してください！
- プロジェクトフォルダ：portfolio
- パッケージマネージャ：npm
- 追加オプション：そのまま
- GIt リポジトリ：そのまま
設定が完了したら、ページ下部の「次へ」をクリックしてください。
続いて「プリセット」の選択画面に移り変わります。
ここでは「手動」を選択して「次へ」をクリックします。
次に機能の選択画面に移ります。
ここでは次の項目にチェックを入れてください。
- Choose Vue version
- Babel
- Router
- CSS Pre-processors
- Linter / Formatter
チェックが完了したら「次へ」をクリックしてください。
さらに細かい設定を行います。設定の詳細は上から順に次のように行います。
- 2.x（デフォルト）
- チェックを入れる
- Sass/SCSS (with dart-sass)
- ESLint + Prettier
- Lint on Save
設定が完了したら「プロジェクトを作成する」をクリックします。
上の画像のような画面が出てくるかと思いますが、今回は「保存なしで続ける」をクリックしてください。
プロジェクトを作成中という表示がなくなるまで待機します。（数分かかる場合があります）
これでプロジェクトの作成は完了です。
デモページの確認
プロジェクト ダッシュボードをの左側から「タスク」をクリックします。
画面が切り替わります。
続いてページ中央の「タスクの実行」をクリックしてください。
ページ右の進行ゲージがチェックマークになるまで待機します。
進行ゲージのちょうど上部にある「アプリを開く」をクリックしてください。
ブラウザで新しくタブが開き、Vue.jsのデモページが開かれたら、完了です。
今後はこのページを開きながら開発していくことになります。
今回はこれで終了です！！お疲れ様でした。
終わりに
今回は『Vue.jsを使ったポートフォリオの作り方』のpart1として開発環境の構築の説明を行いました。
次回以降ではコードを記述していくため、VSCodeなどのコードエディタを準備しておいてください！
お疲れ様でした！！