これから2回に分けて、Vue.jsのチュートリアルを兼ねて時計アプリを作成します。
開発環境の構築
本記事では、vue-cliを使って開発環境を構築していきます。
Node.jsをインストールしていない方はインストールしておいてください。
ターミナルを開いて、
$ npm install -g vue-cli
と入力し実行するとvue-cliがインストールできます。
次に任意の場所にアプリ用のディレクトリを作成し、ターミナルで移動します。
アプリ用ディレクトリ内で、以下のコマンドを実行します。
$ vue init webpack
すると、対話形式で設定を決めることができます。
? Generate project in current directory?
現在のディレクトリにプロジェクトを作成するか聞かれるので、yと入力しEnterを押します。
? Project name
? Project description
? Author
プロジェクトの名前／概要／作者名はお好きに決めてください。
? Vue build
コンパイラの有無を選択できますので、「Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - r ender functions are required elsewhere」を選択します。
? Install vue-router?
? Use ESLint to lint your code?
? Set up unit tests
? Setup e2e tests with Nightwatch?
上から順に、「vue-routerを利用するか」「ESLintを利用するか」「ユニットテストを行うか」「E2Eテストを行うか」を選択できるので、いずれもnと入力しEnterを押します。
? Should we run `npm install` for you after the project has been created? (recommended)
Node.jsのモジュールをインストールするかを聞かれますので、「Yes, use NPM」を選択します。（Yarnを使用している方は「Yes, use Yarn」を選択しても大丈夫です）
設定を終えるとプロジェクトの作成が始まりますので、しばらく待ちます。
プロジェクトの作成が終わったら、
$ npm run dev
を実行します。
ローカルサーバが起動するので、http://localhost:8080 にアクセスします。
上の画面と同じように表示されればプロジェクトの作成は完了です。
本格的なアプリ開発は後編で行っていきます。