Nuxt.js(vue.js)で商品ページの画像生成アプリケーション(SPA)の環境を作る

最近Vue.jsを勉強していて、「はーん、こういう機能あるのねー」から「お、じゃああんなの作ってみたいかも!」という感じになってきたので、さっそく作ってみる。

で、サクっと開発用のサーバーとかビルドとかができるNuxt.jsを使って、楽天やYahooなどで使える商品画像/商品ページ画像のジェネーレーターを作ってみたいと思います。

🔪 下準備

まずはディレクトリを作り、テンプレートや最初のファイル生成に便利なvue-cliをインストールしておきます。で、パッケージ管理にyarnを使いますので、それがない人はそれもインストールします。

$ mkdir shoppagemaker && cd $_
$ brew install yarn
$ yarn add vue-cli

🍲 作り始める

Vueのアプリケーションを作る時に便利なNuxt.jsというフレームワークを利用します。Nuxtは開発用サーバーや完成品を出力する機能などがあり、タスクランナーとかの絡み(辛み)など気にしないでいいし、手っ取り早く作成するのに非常に便利で快適です。

$ vue init nuxt/starter

いくつか質問がくるので、必要があれば入力。基本的に何も入力せずReturnでも大丈夫です。

次に、最初のインストールをして、sassを使いたいのでそれだけインストールします。

$ yarn
$ yarn add node-sass sass-loader

ここまでできたら、試しに開発サーバーを起動してみます。

$ yarn dev

localhost:3000でアクセスできたら成功です。


初めてNuxt.js触ってみましたが、これが確かに便利で早い!サクっとシングルページアプリケーションとかコンポーネント管理したいサイトを作る時はNuxt.js検討するかも。

それでは👋