Added lab0

Author: k-miyake

README.md

@@ -1,2 +1,22 @@
-# handson-vue-ts-basic
-Vue.js 初心者向けハンズオン - Visual Studio Code, TypeScript, ElementUI 編
+# Vue.js 初心者向け Hands-on Lab
+
+Visual Studio Code, TypeScript, Element 編
+
+## ハンズオンのゴール
+
+このハンズオンを実施すると以下のことを体験することができます。
+
+- [Visual Studio Code](https://code.visualstudio.com/) と [TypeScript](https://www.typescriptlang.org/) を使った Vue.js の基本的なプログラミング
+- [Vue CLI](https://cli.vuejs.org/) を使って Vue.js の基本的なプロジェクトの作成
+- [Vue Router](https://router.vuejs.org/ja/) を使ったページの追加と画面遷移
+- [Element](https://element.eleme.io/) を使った簡単な管理画面の作成
+
+## ハンズオン手順書
+
+- [Lab 0 - 開発環境の準備](instructions/lab00.md)
+- Lab 1 - プロジェクトの作成 `後日公開予定`
+- Lab 2 - 基本的なレンダリング `後日公開予定`
+- Lab 3 - テーブルの作成 `後日公開予定`
+- Lab 4 - フォームの作成 `後日公開予定`
+- Option 1 - API の接続 `後日公開予定`
+- Option 2 - さまざまなレンダリング `後日公開予定`

instructions/lab00.md

@@ -0,0 +1,29 @@
+# Lab 0 - 開発環境の準備
+
+## Requirement
+
+- Node.js: 8.11.0 以上必須、できれば 10.15.x 以上を推奨します
+
+## Exercise 1: Visual Studio Code の準備
+
+1. 自分のマシンで Visual Studio Code を起動します。もし、バージョンが古い場合はできるだけ最新に更新してください。インストールされていない場合は、 [公式サイト](https://code.visualstudio.com/) からインストールしてください。
+
+1. Visual Studio Code の機能拡張 [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) を導入します。Vetur を導入することで、 `.vue` ファイルでシンタックスハイライトが有効になります。
+
+## Exercise 2: Vue CLI の導入
+
+1. Vue CLI を導入します。インストール方法の詳細は [Installation | Vue CLI](https://cli.vuejs.org/guide/installation.html) に従ってください。
+
+   ```bash
+   npm install -g @vue/cli
+   ```
+
+1. 以下のコマンドで Vue CLI が利用できることを確認します。このハンズオンでは、Vue CLI 3.x の利用を前提としています。
+
+   ```bash
+   vue --version
+   ```
+
+---
+
+[Next(準備中)](../README.md)