vue.jsの開発環境を構築する 〜やった手順をつらつら〜

1. 必要なソフトをダウンロード

Visual Studio Codeをダウンロード
https://code.visualstudio.com/download

Node.jsをダウンロード
https://nodejs.org/en/download/

This package has installed:

Node.js v10.15.1 to /usr/local/bin/node
npm v6.4.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

Vueコマンドが使えない時の対処法
$ sudo npm i -g vue-cli

→このコマンドを実行でvueコマンドが使えるようになる！

2. vueコマンドでプロジェクトを作成

vue create task-app

↓

  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

↓
バージョンが違うとのことで怒られた！

sudo npm uninstall -g vue-cli
npm install -g @vue/cli

を実行！
↓

成功！再度プロジェクトを作成コマンドを実行

vue create task-app

↓

📄  Generating README.md...

🎉  Successfully created project task-app.
👉  Get started with the following commands:

以下のコマンドでコンパイルをしましょう。

$ cd tesk-app
$ npm run serve 

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                   

 DONE  Compiled successfully in 2614ms                                                                         00:56:18

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

  Note that the development build is not optimized.
  To create a production build, run npm run build.

↓コンパイルに成功したみたいですね。

ブラウザで開いてみましょう！

vue.jsのプロジェクト雛形が出来ました！

環境構築ってオモロイですよね〜