なるはや Vue SPA入門：プロジェクト作成

Vue CLI ver 3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きます。

目次はこちら

今回はプロジェクト作成編です。

前提事項

• node.js が PC にインストールしてあること
• npm or yarn でパッケージ管理ができること（このチュートリアルではyarnを使っていきます）

Vue CLI 3 セットアップ

パッケージマネージャのグローバル環境に、vue コマンドをインストールします。
インストールが終わると、vue コマンドが使用できるようになります。

$ npm install -g @vue/cli
# or
$ yarn global add @vue/cli

$ vue --version

プロジェクト作成

vue コマンドでプロジェクトを作成します。

$ vue create vue-tutorial

? Please pick a preset: (Use arrow keys) 
  default (babel, eslint)
❯ Manually select features

Manually select features を選択し、今回は以下の項目を選択します。

• Babel
• Router
• Vuex

その後はすべて Yes を選択します。しばらく、インストールに時間がかかります。

動作確認

インストールが完了したら yarn serve コマンドでPC上で開発用のウェブサーバを起動して Vue アプリを実行します。

$ cd vue-tutorial
$ yarn serve

http://localhost:8080/ にアクセスしてWelcome to Your Vue.js Appが表示されれば、プロジェクトの作成は完了です。

次回

ファイル構成です。