Kamakura MokMok Hack #56 「Vue を使ってストップウォッチをつくるハンズオン」用のリポジトリです。

• ⚠️ セットアップは基本 MacOS 向けです。
• ⚠️ すでに導入してるよって方はスキップしてください。

Terminal で brew --version を叩いて何もでてこなければ以下を叩いて HomeBrew 入れましょう。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

今回は NodeBrew を使って Node.js のバージョン管理（Node.js 自体のバージョン指定）を行います。 nodebrew と叩いて何もでなければ入れていきましょう。 ※他のバージョン管理を使っても良いです。

brew install nodebrew

トラブルを避けるために今回は以下のバージョンを使います。

nodebrew install v10.15.3

入れたらバージョンを指定します。

nodebrew use v10.15.3

yarn -v と入れて何もでなければ入れましょう。 これらは開発環境を作る上で必要です。

npm i -g yarn

yarn -v&&vue --version と入れて何もでなければ入れましょう。 これらは開発環境を作る上で必要です。

npm i -g @vue/cli

リポジトリの構成については次の通りです。

react-vue-handson/
    ├ vue-stopwatch/ … Vueのプロジェクト
        ├ src/ … ソースコード
            ├ components … コンポーネント群
            ├ vuex … 状態管理関連
    ├ react-stopwatch/ … Reactのプロジェクト
        ├ src/ … ソースコード
            ├ components … コンポーネント群
            ├ redux … 状態管理関連

今回はすでにプロジェクトの基本セットは入れています。コンポーネントや状態管理の実装のハンズオンを行いたいので、プロジェクトを作成する方法を知りたい方は以下をお試しください。

vue create {プロジェクト名}

選択肢にチェックを入れたい時は space キーを押しましょう。 TypeScript を使いたくないという方は Check the features needed for project の時に TypeScript にチェックをいれない様にします。

React はこれで開発環境つくれます。

npx create-react-app react-stopwatch --typescript

※TypeScript 使わない時は --typescript を外すと良いです。でも型の恩恵をうけていきましょー！