【Vue.js】初心者でも躓かない環境構築方法

Introduction

こんにちは、JJ(@JJ_1123_I)です! 今日は、最近Vue.jsの勉強を始めたので、Vue.jsを用いたWebアプリケーションの開発を始めるにあたり必要な手順を記載致します。

対象

  • Vue.jsを始めるにあたり、何から始めたらいいか分からない人
  • フロントエンドの開発全般に知見があまりない人

環境

1.Node.js

以下URLからインストールしてください。
https://nodejs.org/ja/ と打ってそれぞれバージョン番号が表示されたら成功です。

2.Vue.js devtools

ChromeのVue.js拡張ツールを追加してください。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

3.Vetur

VSCodeを利用している人はVue.jsプラグインを入れておくと良いです。
https://marketplace.visualstudio.com/items?itemName=octref.vetur

Vue.jsをインストール

今回は、Nuxt.jsを使います。https://github.com/nuxt/create-nuxt-app

1.インストール

色々聞かれるので、お好きなのをご選択ください。
サンプルで私が選択した内容も貼っておきます。

2.インストール

あとは、以下のコマンドを打てば、
undefined.jpg
この画面が出ればOKです!

3.ローカルにアクセス

undefined.jpg
ブラウザを立ち上げ 「http://localhost:3000」 にアクセスし、以下の画面が出れば完了です。

まとめ

あとは死ぬ気でいじり倒すだけです!!!!!!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です