Vue.js 環境構築

公式リファレンス

npmをインストール

macの場合、ターミナルでコマンドを入力して実行します。
Node.jsをインストールすることで、自動的にnpmもインストールされます。
Node.jsをインストールするには、Homebrewというパッケージ管理ソフトを使う方法が最も簡単です。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install node

インストールが終わったらそれぞれのバージョンを確認してみましょう。

node -v

npm -v

Vue CLIをインストール

バージョンを指定したい場合には指定してください。

npm install -g @vue/cli

インストールが完了したらバージョンを確認しましょう。

vue --version

Vue.jsのアプリを作成する

まずデスクトップに移動します。

cd Desktop

次にアプリを作成します。

vue create アプリ名

実行すると選択できるようになりますので、作成したいアプリに合わせて選択しましょう。
今回は、以下のようにします。

Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
❯ Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)
❯◯ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n) Y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by def
ault): 
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 

Y/NはYを選択します。以上でデスクトップにアプリのディレクトリが作成されました。

アプリを起動する

cd アプリ名

npm run serve

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

ブラウザでlocalにアクセスしてVueのロゴが表示されていれば完了です。