More than 3 years have passed since last update.

Vue.js を学習するための環境を作る

Last updated at 2021-09-12Posted at 2021-09-12

なぜ作ろうと思ったか

数年前に一回勉強しようと思ったけどあまりできなかったので。。
改めて勉強するために環境を整えようと思いました。
前回は JavaScript で実装しようとしていましたが、今回は TypeScript で実装します。

macOS Big Sur バージョン 11.0.1

Atom 1.58.0

nodebrew 1.1.0
node v14.17.6 LTS（2021/9/13現在）
npm 7.23.0

グローバルに vue-cli をインストール。

$ npm install -g @vue/cli

@vue/cli 4.5.13 がインストールされました。

注意

$ npm install -g vue-cli

このコマンドを実行すると vue-cli 2.9.6 がインストールされます。
create コマンドは Vue CLI 3系のみのコマンドになるのでこれでインストールすると使えないようです。
もしインストールしていたら

$ npm uninstall -g vue-cli

上記コマンドでアンインストールしておきましょう。

グローバルに何がインストールされているのか知りたいときは

$ npm list -g --depth=0

上記コマンドでグローバルにインストールされているパッケージがわかります。

ターミナルを開いてプロジェクトを作成したいディレクトリに移動します。
Git Bash ではうまく動かないのでターミナルを使ってください。
Windows ではコマンドプロンプトで動きます。

$ vue create {プロジェクト名}

これで作成プロセスに入ります。

? Please pick a preset:
> Default ([Vue2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

コマンドを実行すると上記のように表示されます。
TypeScript で実装したい場合は一番下の
Manually select features を選択します。
必要なものを選択できるのでスペースキーで選択していきます。
最後まで選択すると作成できます。

Vue.js と TypeScript で実装しやすいように以下のパッケージを Atom でインストールしました。

環境を作るところまでなのでここまでですが、
何か間違っているところなどありましたらご指摘ください。