Vue3の導入

Vue3の導入（nodebrew)

環境構築に必要なもの

• nodebrew
• node.js
• npm
• homebrew (homebrewはインストール済みとします）

1. nodebrewのインストール

まずnodebrewをインストールします。

% brew install nodebrew

インストール完了後、以下の使用できるコマンドが表示されることを確認

% nodebrew
nodebrew 1.2.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>
    nodebrew prune [--dry-run]            Uninstall old versions, keeping the latest version for each major version

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

2.node.jsのインストール

インストールする前にフォルダを作る

% mkdir -p ~/.nodebrew/src

インストールできるバージョンの確認

% nodebrew ls-remote

node.jsのインストール

• バージョン指定
  nodebrew install-binary v*.*.*
• 最新のバージョン
  nodebrew install-binary latest
• 最新の安定版
  nodebrew install-binary stable

インストール後の確認

% nodebrew ls
v18.9.0

current: none

current: noneではnodeが有効化されていないので有効化する

% nodebrew use v18.9.0
% nodebrew ls
v18.9.0

current v18.9.0

3.パスを通す（zshrc)

% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc
% cat ~/.zshrc

~~~~~~~~~~~~~~~~
PATH=$HOME/.nodebrew/current/bin:$PATH

バージョンが表示されるか確認

% node -v
v18.9.0

% npm -v
8.19.1

4.Vue.jsのインストール

公式ドキュメント
https://v3.ja.vuejs.org/
vue.jsを扱うフォルダに移動

今回はCLIではなくViteを使います。
いろんな記事でViteのほうが速度がはやいこと、Vue, Reactなどのライブラリの設定なしですぐ使えることで評価が高いので使ってみようと思います。
Vite公式
https://ja.vitejs.dev/

% npm init vite@latest vue-app-tutorial -- --template vue

Need to install the following packages:
  create-vite@3.1.0
Ok to proceed? (y) y

Scaffolding project in ~~~~/vue-app-tutorial...

Done. Now run:

  cd vue-app-tutorial
  npm install
  npm run dev

アプリが正しく起動することができました。