VueCLI３をインストールする。
VueCLIをインストールするまで...
※この記事は2018年11月に書いたものです。
インストールの流れ
- Homebrewのインストール
- Nodebrewのインストール
- Node.jsのインストール
- VueCLIのインストール
1. Homebrewをインストール
Homebrewはmac用のパッケージマネージャーです
Homebrew： https://brew.sh/index_ja
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
上のコマンドを実行してみてください。
インストールごは以下のコマンドを実行してみてください。
$ brew -v
Homebrew 1.8.1
Homebrew/homebrew-core (git revision ed52; last commit 2018-11-04)
ちゃんとインストールされてると上のような結果になります。
2. Nodebrewをインストール
先ほど紹介したHomebrewを使用してインストールします。
$ brew install nodebrew
インストール後に以下のコマンドを実行するとバージョンを確認できます。
nodebrew 1.0.1
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 backword 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>
Example:
# install
nodebrew install v8.9.4
# use a specific version number
nodebrew use v8.9.4
- nodebrewが使いやすいようにパスを通す。
bashの場合
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
追加したあとターミナルを再起動
3. Node.jsのインストール
- インストール
$nodebrew ls-remote
これを実行すると
以下のようにバージョンが表示されます。
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31
v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95
v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103
v0.1.104
~~~~省略~~~~
v10.0.0 v10.1.0 v10.2.0 v10.2.1 v10.3.0 v10.4.0 v10.4.1 v10.5.0
v10.6.0 v10.7.0 v10.8.0 v10.9.0 v10.10.0 v10.11.0 v10.12.0 v10.13.0
v11.0.0 v11.1.0
io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4
io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0
io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1
- 最新版を指定してインストール
$ nodebrew install-binary latest
- バージョンを指定する場合
$ nodebrew install-binary {version}
- インストールされたnodeを有効化
$nodebrew ls
v11.1.0
current: none
必要なバージョンを有効化する。
$ nodebrew use version
nodeのバージョンを確認する
$ node -v
v10.13.0
ここで指定したバージョンもしくは最新版が表示されます。
npmのバージョンを確認する。
$ npm -v
6.4.1
4. VueCLI3のインストール
- vue.jsの環境をインストールします。
$ npm install -g vue-cli
そしたら...
- プロジェクトの作成
作りたいディレクトリに移動して
$ vue create myprojects
いくつか質問されるのでenterで進みます
Please pick a preset: default (babel, eslint)
Vue CLI v3.1.1
✨ Creating project in /Users/satousa/Documents/develop/vue/2018/myprojects.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
⸨ ░░░░░░░░░░░░░⸩ ⠙ fetchMetadata: sill resolveWithNewModule get-stream@3.0.0 checking installable st
このようになります。
✨ Creating project in /Users/satousa/Documents/develop/vue/2018/myprojects.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
> fsevents@1.2.4 install /Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/fsevents
> node install
[fsevents] Success: "/Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> yorkie@2.0.0 install /Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/yorkie
> node bin/install.js
setting up Git hooks
done
added 1181 packages from 754 contributors in 34.213s
🚀 Invoking generators...
📦 Installing additional dependencies...
added 23 packages from 24 contributors, updated 2 packages and moved 5 packages in 14.464s
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project myprojects.
👉 Get started with the following commands:
$ cd myprojects
$ npm run serve
完了したらこのようになります
そしたら
$ cd myprojects
$ npm run dev
で動かせます。
以上でVueCLIのインストールは終了です。
お疲れ様でした！
参考：
https://www.hirooooo-lab.com/entry/development/install-node
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
https://qiita.com/567000/items/dde495d6a8ad1c25fa43