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

2022年8月28日

環境
Windows 10 Home 64bit
node v16.17.0
npm 8.15.0

Vue3をインストールする手順

1.@vue/cliをインストールします

>npm install -g @vue/cli

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

>vue --version
@vue/cli 5.0.8

3.yarnをインストールします
npm 経由でyarnをインストール

>npm install -g yarn

yarnのバージョンを確認します

>yarn -v
1.22.19

yarnの初期設定を行います

>yarn init

4.package.jsonを作成します
全てEnterキーを押します

>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:\study\skill\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)

Vueアップグレードします

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

>vue upgrade --next

Gathering package information...t

DONE Seems all plugins are up to date. Good work!

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

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

5.プロジェクトを作成します
「ccapp」というプロジェクトを作成します

>vue create ccapp
 Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  略
 $ cd ccapp
 $ yarn serve

6.プロジェクトに移動します
>cd ccapp
>yarn serve

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

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