Nuxt2.0でショッピングカートを作る

Nuxt2.0がリリースされたので試してみた。簡単なショッピングカート。

github.com

 

 

Nuxtは2.0からはCLIツールが提供されている。

github.com

 

create-nuxt-appをインストールしてコマンドを実行すると以下のように色々聞かれる。

APIサーバー用にexpress、CSSフレームワークにbulma、他にaxiosを一緒にインストールした。

 

 

$ create-nuxt-app Nuxt2ShoppingCart

> Generating Nuxt.js project in /Users/yuto-ogi/Work/nuxt/Nuxt2ShoppingCart

? Project name Nuxt2ShoppingCart

? Project description My praiseworthy Nuxt.js project

? Use a custom server framework express

? Use a custom UI framework bulma

? Choose rendering mode Universal

? Use axios module yes

? Use eslint no

? Use prettier no

? Author name yutoogi

? Choose a package manager yarn

Initialized empty Git repository in /Users/yuto-ogi/Work/nuxt/Nuxt2ShoppingCart/.git/

yarn install v0.21.3

info No lockfile found.

[1/4] 🔍  Resolving packages...

 

~

 

success Saved lockfile.

✨  Done in 126.85s.

 

  To get started:

 

    cd Nuxt2ShoppingCart

    yarn run dev

 

  To build & start for production:

 

    cd Nuxt2ShoppingCart

    yarn run build

    yarn start

 

  

で、3~4時間あれこれやってできあがったのがこれ。

カートの情報はLocalStorageにも保存しており、ページリロード後に復元されるようにしている。

「ADD」ボタンを押したときとかカートをクリアしたときの反応が分かりづらかったり、font-awesomeが読み込まれなかったりするけどまぁいいか。