Vue3 Awesome Starter

Features

• 📦  Typed Programming (Typescript)
• 📚  Composition API & Setup (Vue3)
• 🛹  Simple Store (Pinia)
• 🧵  Built-in Component & Layout
• 📘  Configure StyleLint
• 📙  Configure ESLint
• ✨  Setting Reset Style
• ⚡️  Setting Mixin Style
• 📍  Absolute path
• 📱  Check Device
• 🗂️  SSR & Page SEO
• 🪄  Theme Mode

Framworks

• Bundler : Webpack
• Core : Vue3
• Store : Pinia

Code Pattern

• Static(public)
• Root(src)
  
• ⎣ api - rest api
  
• ⎣ assets - image, icon, font 등
  
• ⎣ components - 최소 단위 컴포넌트(비즈니스 로직, 상태값 사용 불가)
  
• ⎣ containers - 컨트롤 로직이 존재하는 뷰 컴포넌트, 최소 단위 컴포넌트의 조합으로 만들어진다.
  
• ⎣ interface - 객체 타입 지정을 모아두는 공간
  
• ⎣ layouts - 최초 고정 영역(device단위 또는 gnb,lnb로 나눈다)
  
• ⎣ router - vue router
  
• ⎣ store - pinia store
  
• ⎣ styles - css셋 모음
  
• ⎣ utils - helper, handler 모음
  
• ⎣ views - 페이지 단위의 vue 컴포넌트
  

Getting Started

1) Installation

git clone ryan-ahn/boilerplate-vue3-webpack
cd boilerplate-vue3-webpack
npm install

2) Configuration VSCode

setting.json 파일을 vscode 세팅에 입력
관련 익스텐션 전부 설치(문서 확인)

3) Run development server

npm run dev

Using with Vue3 Setup

<template>
  <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
// 함수 생성
const function = () => {console.log('Hello World!')}
// 프롭스 정의
const props = defineProps({title})
</script>

Using with Store

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useDataStore from '@store/useDataStore';
// 스토어 불러오기
const store = useDataStore();
// 구조 분해 할당
const { data } = storeToRefs(store);
// 함수 사용
store.getData()
</script>

<style lang="scss">

Using Mixin

.app {
  // 플렉스 세트(기준 정렬, 대칭 정렬, 방향)
  @include flexSet('center', 'center', 'row')

  // 박스 세트(가로, 세로, 라운딩)
  @include boxSet(00px, 00px, 00px)

  // 컬러 세트(폰트 컬러, 배경 컬러)
  @include colorSet(#000000, #000000)

  // 배경 세트(이미지, 사이즈)
  @include backgroundSet('url', 00px)

  // 폰트 세트(폰트 크기, 두께, 줄간격)
  @include fontSet(00px, 000, 00px);

  // 일립시스 세트(줄수, 줄간격)
  @include ellipsisSet(0, 00px)
}