Windows 11にVue3の環境を構築する方法

2022年9月25日

環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0

操作方法
1.@vue/cliをインストールします。

C:\study\vue>npm install -g @vue/cli

2.vueのバージョンを確認します

C:\study\vue>vue --version
@vue/cli 5.0.8

3.package.jsonを作成します

C:\study\vue>npm init
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue)  #すべてEnterキーを押します
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\study\vue\package.json:

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) y

4.vueアップグレードを行います

C:\study\vue>vue upgrade --next
✔  Gathering package information...
 DONE  Seems all plugins are up to date. Good work!

5.Vue3プロジェクトを作成します
vuedemoというプロジェクトを作成します。

> vue create vuedemo

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM
  略
 $ cd vuedemo
 $ yarn serve

6.Vue3プロジェクトに移動します

C:\study\vue>cd vuedemo

下記コマンドを実行してVue3を起動します

>yarn serve

7.動作確認
ブラウザよりhttp://プライベートIP or localhost:8080にアクセスします。
「Welcome to Your Vue.js App」が表示されます。