이 기사는 Vue.js Advent Calendar 2019 #1 첫날 기사입니다. htps : // 코 m / 아 d

AdventCalendar 첫 참가입니다. 잘 부탁드립니다.

VueCLI로 EC 사이트의 모의 만들기

처음에 만든 물건의 이미지입니다.
배포된 샘플의 주소입니다. htps : // 에ーーーーーーーーーーーーぃ. 음 b. 아 p/
코드는 여기입니다. htps : // 기주 b. 코 m/유지테시마/에-사 mpぇ-ゔ에-cぃ

동기 부여

Nuxt.js를 사용해 보면, 그 편리함에 SSR의 간단함에 VueCli를 도금 사용하지 않게 되어 버렸습니다.
그렇지만, VueCli를 사용해 CompositionApi의 공부를 하고 있을 때 VueCli로 만드는 것도 재미있다고 생각했습니다.
뭔가 만들고 싶다고 생각하고 이번 EC 사이트의 모의를 만들어 보겠습니다. Nuxt.js 바람으로 만들어 보겠다는 것을 테마로 합니다.
무언가를 공부할 때 샘플 앱을 만드는 레퍼토리를 늘려 가서 학습을 즐겁게 하고 싶습니다.

환경

@vue/cli 4.1.1
노드 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は省略...

페이지 파일

라우팅에서 사용하는 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로 만들고 싶습니다.