Help us understand the problem. What is going on with this article?

Vue.jsプロジェクト開発を始める準備

はじめに

前回、Vue.js開発環境構築記録という記事を書きました。
こちらではvue-cliをインストールするまでを目標としました。
今回はその続きです。実際にプロジェクトの開発環境が整うまでの手順を記録します。

目標

プロジェクトを一つ作成してブラウザで実行できたことを確認する。

やったこと

IDEの用意

何を使うのか迷いましたが Visual Studio Code をインストールしてみることにしました。
理由としては

  • Azure DevOps を使える環境であるため
  • 前の現場で少しだけ触ったがまだ慣れてはいないため
  • 各所でオススメされているため

などの理由で決めました。

ダウンロードページからMac用を入手。
ダウンロードフォルダに Visual Studio Code.app が保存されて、それをクリックするだけでIDEが立ち上がりました。

プロジェクトの初期化

公式サイトにvue-cliのはじめ方が乗っていました。https://jp.vuejs.org/2015/12/28/vue-cli/

使用方法は次のようになります:
npm install -g vue-cli
vue init webpack my-project
プロンプトへ回答
cd my-project
npm install
npm run dev # ドジャーン!

すごく簡単そうに見えます。
この手順に沿ってやってみます。

npm install -g vue-cli

これは前回の記事を書いたときに実施済みです。

vue init webpack my-project

自分のworkspace内で実行します。

$ vue init webpack my-project

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

言われるがまま

$ npm install -g @vue/cli-init

npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@4.4.6
added 253 packages from 207 contributors in 15.257s

もう一回

$ vue init webpack my-project

プロンプトへ回答

上のコマンドを実行するとプロンプトでプロジェクトの設定方法を問われます。
回答形式はいくつかありました。

  • (Y / n)を押して選択
  • 矢印キーで選択してEnter
? Project name my-project
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

質問が終わるとプロジェクトの作成が始まります。
終了すると、実行ディレクトリ/プロジェクト名配下にファイルが作成されました。
スクリーンショット 2020-07-03 16.06.16.png

cd my-project

cd my-project

npm install

npm install

audited 1744 packages in 10.551s

29 packages are looking for funding
  run `npm fund` for details

found 580 vulnerabilities (566 low, 9 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm run dev

$ npm run dev

 DONE  Compiled successfully in 6781ms                                                                                              16:13:48

 I  Your application is running here: http://localhost:8080

できました:thumbsup:
スクリーンショット 2020-07-03 16.14.32.png

停止する場合は Control + c

Visual Studio Code で開いてみる

Welcome pageのOpen folderから先ほどinitしたフォルダを選択します。
スクリーンショット 2020-07-03 16.47.36.png

さいごに

開発を始める準備がようやく整いました。
ここから実際にソースを触るのはまた別の記事に残します。

助けてもらったサイト

e-onm
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away