【Vue.js】Vue.jsのインストールとプロジェクトの新規作成

Windows10の環境でVue.jsのインストールする方法と、プロジェクトを新規で作成する流れをここにメモしておきます。

事前準備（Node.js）

Vue.jsをインストールするにはNode.jsが必要になるので、事前にNode.jsをインストールしておいてください。

Node.jsのインストール方法は下記に記載していあります。

<Node.jsをWindows10にインストールする>

・バージョン情報

• Widnows10
• Node.js：v16.13.1
• npm：8.1.2
• @vue/cli：4.5.15
• Vue.js：3.2.26

Vue.jsのインストール

まず、コマンドプロンプトを起動します。

　『Windowsボタン＋R → cmd』

Vue.jsの開発ツールである「@vue/cli」インストールします。

「@vue/cli」がインストールされると、Vue.jsもインストールされています。

下記コマンドをコマンドプロンプト上で打ち込んで下さい。

　『npm install -g @vue/cli』

> npm install -g @vue/cli
[#########.........] / idealTree:inquirer: sill fetch manifest @hapi/topo@3.x.x

 ↓↓↓↓

added 941 packages, and audited 942 packages in 1m

67 packages are looking for funding
  run `npm fund` for details

11 vulnerabilities (4 moderate, 7 high)

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0
npm notice Run npm install -g npm@8.3.0 to update!
npm notice

最後にnpmの最新バージョン（8.1.2 -> 8.3.0）の警告が出ていますね。

「npm install -g npm@8.3.0」たどエラーになるので、「npm i -g npm@latest」の方を実行してみてください。

今回は一旦無視してバージョンを確認してみます。

>vue --version
@vue/cli 4.5.15

Vue.jsのプロジェクト作成

「sample01」という名前でプロジェクトを新規作成してみます。

> vue create sample01

以下のコマンドが表示されます。

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

Vue2かVu3か聞かれているので今回はVue3を選択します。

上と下の矢印キーで選択して、Enterキーを押してください。

>npm list vue
sample01@0.1.0 C:\Users\user\Documents\sample01
+-- @vue/cli-plugin-babel@4.5.15
| `-- @vue/babel-preset-app@4.5.15
|   `-- vue@3.2.26 deduped
`-- vue@3.2.26
  `-- @vue/server-renderer@3.2.26
    `-- vue@3.2.26 deduped

プロジェクトが作成されたら、プロジェクトをフォルダに移動してサーバを起動してみます。

> cd sample01

> npm run server

 DONE  Compiled successfully in 2219ms                                                                                                      22:56:22


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

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

サーバを停止したい場合は「Ctrl＋C」して「Y」と入力すると停止します

バッチ ジョブを終了しますか (Y/N)? y

設定は以上です。