LoginSignup
3
4

More than 3 years have passed since last update.

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

Posted at

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

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

Node.jsをダウンロード:point_up_tone1:
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コマンドが使えるようになる!:relaxed::v_tone2:

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


バージョンが違うとのことで怒られた!:frowning2:

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

を実行!

image.png

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

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.

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

ブラウザで開いてみましょう!
image.png

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

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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4