この記事の目的
Vue.jsの学習を始める際に実施したセットアップ手順のメモです。
開発環境、必要なもの
- Mac OS Catalina 10.15.2 ←自分の場合(参考程度)
セットアップ
ndenvのインストール
- 複数バージョンのNodeを切り替えて使用することになると思いますので、
ndenvをインストールします。
$ brew install ndenv
- PATHを追加します
echo 'export PATH="$HOME/.ndenv/bin:$PATH"'
echo 'eval "$(ndenv init -)"'
- Nodeをインストールするために
node-buildをインストールします。
$ git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build
Node.jsのインストール
- インストールできるNode.jsバージョンを確認
$ ndenv install -l
- Node.jsのインストール
$ ndenv install v12.16.1 #LTS版がおすすめ
- 使用するNode.jsの設定
$ ndenv versions # インストールしているNode.jsのバージョンを確認する
$ ndenv global v12.16.1 # デフォルトバージョンを設定するとき
$ ndenv local v12.16.1 # プロジェクトごとに変更するとき
- Node.jsのバージョン確認
$ node --version
Vue.jsのインストール
- Vue CLIのインストール
$ npm install -g @vue/cli
- Vue cli-service-globalのインストール
$ npm install -g @vue/cli-service-global
動作確認
- vueファイルを作成します。
$ cat app.vue
<template>
<div id="app">
<h1>Hello World</h1>
</div>
</template>
- 実行する
$ vue serve
- ブラウザで確認する。
- http://localhost:8080にアクセスしてみてください。
- 期待通りにブラウザに表示されていたら、セットアップ完了です！
終わりに
- 最低限のセットアップになりますが、上記の手順で一通りの実行環境は整います。
- editor用のプラグインの設定等の設定も追記予定です。
補足
- Google Chrome用に
vue-devtoolsをインストールしておくのも必須のようです。