Vuejsの環境構築を2分で簡単に解説
スポンサードリンク
おはようございます。Shotaです。
今回の記事では、Vuejsを活用する上で重要な開発環境を構築するための説明をしていきます。WEB制作あるいはWEB開発を経験している方にとっては馴染み深いかも知れませんが、本書を読み進めていく上でバージョンにより挙動が違う場合もありますのでそれについての確認もお願いします。
それでは早速、本題に入りましょう。
環境構築
①Node.jsのインストール
Node.jsは元来、サーバサイドで動くJavaScriptです。インストールするとnpmというパッケージ管理ツールも同時にインストールされます。Vuejsをインストールする上では、npmが非常に重要になります。余談ですが、npmはReactやAngularのような別のフレームワークをインストールする際に必要不可欠です。これらの開発を進めたい方は絶対にNode.jsをインストールしてください。
▼Node.js公式サイト
本記事では、下記のバージョンを使用します。
node.js：v.17.3.0
npm：v8.3.0
Node.jsをインストールする際にnpmも同時にインストールされるので、Node.jsとは別にnpmをインストールする必要はありません。
インストールが終了すれば、nodeコマンドやnpmコマンドが問題なく使用できます。
②Vue CLIのインストール
以下のコマンドを入力してVue CLIをインストールしてください。
npm install -g @vue/cli
インストールが完了すれば、vueコマンドを使用できます。その後、vueのcreateコマンドを入力してください。
vue create アプリ名
プリセットの設定
次にプリセットを選択しますが、基本的にはManually select featuresを選択してプロジェクトの特性やそれにあった設定にカスタマイズしていきます。
選択肢の上下移動には「↑」「↓」キー、選択するにはスペースキー、決定するにはEnterキーを押します。Y/nについては、Y(はい)、n(いいえ)を入力してEnterで決定です。
プロジェクトに必要な機能の選択
Manually select featuresを選択した後、プロジェクトに必要な機能の一覧が出てくるので必要な機能を選択していきましょう。
? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Choose Vue version ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
Choose Vue versionを選択していると、Vueのバージョンを選択できます。本記事では以下の項目を選択することにします。
Vuex
Choose Vue Bersion
CSS Pre-processors
Router
Choose Vue Bersionの設定
Vueのバージョンを選択できます。本記事では3.xを選択します。
Vuexの設定
Vuexを設定していると、routerの履歴モードを選択できます。Yを選択すると、一般的なWEBサイトのようにURLに#が含まれないURLを構成できます。
CSS Pre-processorsの設定
CSSプリプロセッサを選択できます。SaSS/SCSSを使う場合は選択肢が2つありますが、dart-sassを選択しましょう。
最終的な設定
ここまでの設定を保存して使い回すかどうかを指定できます。保存する場合は名前を指定できます。最後にPackage Managerを指定できます。Use NPMを設定しましょう。
ここまでの選択が完了するとプロジェクトが作成されます。これには多少時間がかかります。
完成したら1階層下にプロジェクトが作成されるのでnpm run serveで開発を始めていきます。そして、localhost:8080にアクセスすればVue CLIのブラウザが表示されます。
これで基本的な環境構築は終了です。
まとめ
本日の記事では、Vuejsの環境構築について簡単に解説しました。
今日の記事はこれで終了です。
【参考図書】
