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が表示されれば、プロジェクトの作成は完了です。
次回
ファイル構成です。