Windows11でVue.jsの開発環境を整える｜大福おじさんの備忘録

Windows11でVue.jsの開発環境を整える

2023/08/05

Voltaのインストーラーを公式サイトからダウンロードする
Windowsの開発者モードを有効にしておく。
検索ボックスに「開発者」と入力し、「開発者向け設定」を起動する。
開発者モードを「オン」にして閉じる
インストーラーを起動してVoltaをインストールする。
以下のコマンドでバージョンを確認する。
```
> volta -v
```
Voltaのバージョンが表示されればOK
Voltaを使ってnode.jsをインストールする
バージョン指定無し
```
「volta install node」
```
バージョン指定有り
```
「volta install node@14.15.5」
```
以下のコマンドでnode.jsのバージョンを全て確認する
```
> node -v
```
インストールされているnode.jsのバージョンを全て確認する
```
> volta list all
```
npmのバージョンも確認しておく
```
> npm -v
```
プロジェクトディレクトリを作成する
当該ディレクトリへcdコマンドで移動し、以下のコマンドを実行
```
> npm init -y
```
プロジェクトでnode.jsバージョンを固定させる
```
> volta pin node@16.20.1
```
コマンドプロントで以下を実行し、Vueをインストールする
```
> npm install -g vue-cli
```
インストールされたVueの確認をする
```
> vue –version
```
下記コマンドでwebpackをインストールする
```
>> vue init webpack
```
今のディレクトリで良いかを聞かれるので、yを押下
```
Generate project in current directory?
```
プロジェクト名・概要・作者を聞かれるので適当に
「Runtime-only: about 6KB」から始まる文言を選択してEnter
vue-router使用の有無を問われるので、回答してEnter
Linter使用の有無を問われるので、回答してEnter
ユニットテスト実行の有無を問われるので回答してEnter
E2Eテスト実施の有無を問われるので、回答してEnter
Yes, use NPMを選択してEnter
以下、いずれかのコマンドでローカルサーバー起動
```
npm start
```
```
npm run dev
```
localhost:8080へアクセス
サーバーの停止は「Ctrl + C」