1. はじめに 社内で Nuxt.js + TypeScript + Vuetify の構成で、SPAを開発しました。 その際に開発効率が高くて良いと感じたので、環境構築や開発の方法をご紹介します。 良いなと思ったことは下記の3点です。 Nuxt.jsを使うことで環境構築が簡単に行える TypeScriptを使うことで型の恩恵を受けながら開発を行える Vuetifyを使うことでマテリアルデザインのUIを手軽に扱える 今回は下の画像のようなSPAを作成するところをゴールとします。 現在の時刻から、今年が何%進んでいるかをプログレスバーで表示します。 ※この記事ではSSRは取り扱いません。ご了承ください。 2. 技術紹介 この記事で取り扱う下記の言語やフレームワークについて概要をご紹介します。 Nuxt.js TypeScript Vuetify 2.1. Nuxt.js Nuxt.js は、
![Nuxt.js + TypeScript + Vuetify でWebアプリ開発環境を構築する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/45c8c0ac998a5fb8e22aa3253e67c682728517af/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TnV4dC5qcyUyMCUyQiUyMFR5cGVTY3JpcHQlMjAlMkIlMjBWdWV0aWZ5JTIwJUUzJTgxJUE3V2ViJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUU5JTk2JThCJUU3JTk5JUJBJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgyJTkyJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kOWE5NzRjMmMxMGE3N2ViNDczNDQ1MDA1YmI3M2Q2Mg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbmF2aXRpbWVfdGVjaCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTA2ZjMzNjNiNmVhZDQyN2M4YTU3YTI0MDVhMWNkN2E%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dca5a8dda99c6d90da6912f17e8250325)