Windows10でVue3環境をインストールする

2021年11月17日

環境情報
Windows10 64 bit
node –version v17.1.0
npm –version 8.1.2

操作方法
1. @vue/cliインストール
>npm install -g @vue/cli

2. vueバージョン確認
>vue –version
@vue/cli 4.5.15

3.package.jsonを作成します
C:\>cd vue

C:\vue>npm init

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)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\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)

4.アップグレードを行う

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

5.プロジェクトを作成します

C:\vue>vue create vuearkgame

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)

  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
  
「Default (Vue 3)」を選択し、enterキーを押下します。
Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
  
 「Use Yarn」を選択し、enterキーを押下します。
 略
 $ cd vuearkgame
 $ yarn serve

6.Vue3を起動します

> cd vuearkgame
> yarn serve

エラーメッセージ

Error: error:0308010C:digital envelope routines::unsupported
   at new Hash (node:internal/crypto/hash:67:19)
   at Object.createHash (node:crypto:130:10)

解決方法
C:\vue\vuearkgame>set NODE_OPTIONS=–openssl-legacy-provider

再度Vue3を起動します

> yarn serve
 DONE  Compiled successfully in 7694ms       9:53:21


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.17.100.15:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

7.画面確認
http://localhost:8080/
http://172.17.100.15:8080/