Vue.jsでECサイトのモックアップを作ってみた。

11522 ワード
Bulma Vue.js vue-cli Vue.js テキストリンク

この記事は、Vue.js Advent Calendar 201９ #1 1日目の記事です。https://qiita.com/advent-calendar/2019/vue

AdventCalendar初参加です。よろしくお願い致します。

VueCLIでECサイトのモックを作ってみる

はじめに出来た物の画像です。
デプロイしたサンプルのアドレスです。https://ec-sample-vue-cli.web.app/
コードはここです。https://github.com/yujiteshima/ec-sample-vue-cli

モチベーション

Nuxt.jsを使ってみて、その便利さに、SSRの簡単さにVueCliをめっきり使わなくなってしまいました。
でも、VueCliを使ってCompositionApiの勉強をしている時にVueCliで作るのも面白いなと思いました。
何か作ってみたいと思い、今回ECサイトのモックを作ってみます。Nuxt.js風に作ってみるというのをテーマにしていきます。
何かを勉強する時のサンプルアプリを作るレパートリーを増やして行って、学習を楽しくしたいと思います。

環境

@vue/cli 4.1.1
node v10.15.3
yarn 1.19.0

仕様

データは外部APIから取って来ず、storeに仮のデータを入れておきます。
認証もAuth0やFirebaseAuthentication等の実装はせず仮の実装にします。
ページ構成は、Nuxt.jsでPageで実現する様な感じで作ってみます。

プロジェクト作成

$ vue create ec-sample-vue-cli

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

CSSフレームワークは、bulmaを使います。

bulmaの勉強を兼ねています。軽量だと聞きました。使っていない部分は使わずに部分的に取り込むことも出来ると聞きました。
まずは色々作ってみて、慣れてから使っている部分だけ部分的に取り込むことにチャレンジしてみます。

$ yarn add bulma

初期のsrcディレクトリ

.
├── App.vue 　
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
├── store
│   └── index.js
└── views
    ├── About.vue
    └── Home.vue

Nuxt.jsを真似てフォルダ構成を作成してみる。

App.vueをNuxt.jsでのDefault.vueのにしたいと思います。名前もDefault.vueに変えちゃいます。
viewsの中にindex.vueを作ってルートディレクトリとして、Nuxt.jsと同じ様にページを配置して作ってみたいと思います。

.
├── assets
│   ├── filters.js
│   ├── logo.png
│   └── validators.js
├── components
│   ├── footer
│   │   └── Footer.vue
│   ├── header
│   │   └── Header.vue
│   ├── hero
│   │   └── Hero.vue
│   ├── menu
│   │   └── Menu.vue
│   ├── modal
│   │   ├── Checkout.vue
│   │   ├── Login.vue
│   │   └── Registration.vue
│   ├── products_list
│   │   ├── Products.vue
│   │   └── ProductsListContainer.vue
│   └── search
│       └── Search.vue
├── defalt.vue
├── main.js
├── router
│   └── index.js
├── store
│   └── index.js
└── views
    ├── index.vue
    ├── produst_detail
    │   └── _id.vue
    └── user
        └── wishlist
            └── index.vue

Default.vueで全ページ共通のComponentsを配置する。

default.vueのコード
全ページ、ヘッダーとフッター、モーダルは共通です。

<template>
  <div>
    <Header />
    <main>
　　　 <!--ルーティングで表示するのはこちらです-->
      <router-view />
      <!--モーダルはここにまとめました-->
      <LoginModal />
      <RegistrationModal />
      <CheckoutModal />
    </main>
    <Footer />
  </div>
</template>
<script>
import LoginModal from "@/components/modal/Login";
import Header from "@/components/header/Header";
import Footer from "@/components/footer/Footer";
import RegistrationModal from "@/components/modal/Registration";
import CheckoutModal from "@/components/modal/Checkout";
export default {
  components: {
    Header,
    Footer,
    LoginModal,
    RegistrationModal,
    CheckoutModal
  }
};
</script>

...scssは省略...

Pageファイル

ルーティングで使うNuxt.jsでいうPagesに格納するファイル群はviewsフォルダにまとめます。
これでNuxt.jsに教えてもらったフォルダの配置に近くなったと思います。

└── views
    ├── index.vue
    ├── produst_detail
    │   └── _id.vue
    └── user
        └── wishlist
            └── index.vue

routerも掲載しておきます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: '',
    component: Home,
  },
  {
    path: '/product_detail/:id',
    name: 'product_detail-id',
    component: () => import('../views/produst_detail/_id.vue')
  },
  {
    path: 'user/wishlist',
    name: 'user-wishlist',
    component: () => import('../views/user/wishlist/index.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/ec-sample-vue-cli/', // new!
  routes
})

export default router

まとめ

ルーティングは、自分で書く必要がありますが、VueCliで書くのも面白いと思います。
Jsファイルの軽量化や、CompositionAPIの様な新しい仕様を試したり、新しいライブラリを試したりする時は出来る事が多い分、
Nuxt.jsよりやりやすいと思いました。今回、作ったSampleで次はCompositionAPIで作ってみたいと思います。