月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

Vue CLIの導入とVueプロジェクト作成方法を解説!

             
  • 2018.08.20
  • IT
Vue CLIの導入とVueプロジェクト作成方法を解説!
Advertisement

 

Vue.jsを用いた開発において重要となるVue CLI。

今回はVue CLIのインストールから、Vueプロジェクトの作成方法を解説していきます。

 

 

Vue CLIとは

Vue CLIとは、Vue.jsを使ったアプリケーション開発を支援するためのコマンドラインインターフェースです。

Vue CLIを利用することで、ツールやライブラリといったアプリケーション開発に必要な開発環境を簡単に構築できます。

 

 

Vue CLIのインストール

Vueプロジェクトを作成するために、まずはVue CLIをインストールしておきます。

※Node.jsとnpmがインストールされている前提です。

 

上記のコマンドを実行し、Vue CLIをグローバルにインストールします。

 

上記のコマンドでバージョンが表示されれば、Vue CLIのインストールは完了です。簡単ですね。

 

 

Vueプロジェクトの作成方法

では、Vueプロジェクトを作成していきましょう。

 

 

Vueプロジェクトの作成

まず、プロジェクトを作成したいフォルダに移動し、「vue init webpack my-app」を実行します。

・「webpack」は「webpack-simple」に変更可能です。「webpack-simple」は学習用などに使用する簡易版です。
・「my-app」はプロジェクト名になります。

 

 

Vueプロジェクトの作成_質疑応答

各質問に答えていきます。

質問 答え
Project name プロジェクト名です。
※そのままEnterで問題ありません。
Project description プロジェクトの説明です。
※そのままEnterで問題ありません。
Author 作者の名前やメールアドレスです。
※そのままEnterで問題ありません。
Vue build ビルドについてです。
※そのままEnterで問題ありません。
Install vue-router? Vue Routerをインストールするかどうかです。
Use ESLint to lint your code? ESLintをインストールするかどうかです。
⇒ESLintは構文チェックをするツールです。
Set up unit tests 自動テストツールをインストールするかどうかです。
Setup e2e tests with Nightwatch? 自動テストツールをインストールするかどうかです。
Should we run npm install for you after the project has been created? (recommended) 自動的にモジュールをインストールするかどうかです。
※そのままEnterでnpmを使用します。

 

 

my-appの完成

my-appができれば完成です。

 

 

Advertisement

 

開発サーバを起動する

では、コマンドから開発サーバを起動してみましょう!

 

 

開発サーバ起動

「my-app」の中で「npm run dev」を実行します。

 

 

Vueプロジェクトの画面

http://localhost:8080/」にアクセスすると、上記のような画面が表示されます。

 

 

まとめ

今回は、「Vue CLIの導入」と「Vueプロジェクトの作成方法」を解説しました。

Vue CLIは思っている以上に導入が簡単ですね。

Vueプロジェクトも簡単に作成できますし、ここから色々とカスタマイズしていきたいですね。

ではまた!

 

 

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

 

Travelerを知らないの?