vueの環境を構築してみた

はじめに

ライブラリの読み込みではなく、vueプロジェクトを作成してvueの環境を構築してみました。

環境

OS：macOS Ventura 13.6.3
yarn：1.22.21
nodenv： 1.4.1
node：16.13.2
vue：2

Node.js

インストール

まず、nodenvでnode.jsをインストールします。

$ brew install nodenv

バージョンを指定

後述のvueプロジェクトの作成でnode.jsのバージョンが合わなかったため、バージョンを16.0.0以上に設定します。

$ nodenv install 16.13.2
$ nodenv local 16.13.2

16.0.0以上に設定されていることを確認

$ nodenv local
16.13.2

yarn

続いてパッケージマネージャーをインストールします。

インストール

$ brew install yarn

$ yarn --version
1.22.21

vue

パッケージをインストール

vueのパッケージをインストールします。

$ yarn global add @vue/cli

プロジェクトを作成

vueのプロジェクトを作成します。

$ vue create vue-project

プロジェクトの設定内容を聞かれるのでそれぞれ選択します。

プリセットを選択します。
今回はvue2のデフォルト設定を選択します。

Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features 

続いてパッケージマネージャーの選択です。
今回はyarnを選択します。

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM 

結果、「Successfully」をなれば成功です。

・・・
🎉  Successfully created project vue-project.
👉  Get started with the following commands:

 $ cd vue-project
 $ yarn serve

サーバーを起動して動作確認

起動

プロジェクト作成時に実行コマンドが出力されています。
プロジェクトディレクリに移動してサーバを起動します。

$ cd vue-project
$ yarn serve

「yarn serve」を実行すると、プロジェクト内のpackage.jsonで設定されているスクリプトが実行されます。
以下ですね。

package.json

・・・
  "scripts": {
    "serve": "vue-cli-service serve"
  },
・・・

以下のように「successfully」となっていれば成功です。

・・・
 DONE  Compiled successfully in 767ms                                                                                    8:33:15 PM


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

ブラウザからアクセス

「yarn serve」実行時に出力された「http://localhost:8080/ 」にアクセスします

vueのWelcomeページが表示されれば成功です。

ハマったポイント

% vue create vue-project
error eslint-plugin-vue@8.7.1: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.16.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
 ERROR  Error: command failed: yarn 
Error: command failed: yarn 
    at ChildProcess.<anonymous> (/Users/xxx/.config/yarn/global/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1048:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)

プロジェクトの作成で発生。
Node.jsのバージョンを16.0.0以上に指定して解消しました。

参考文献