MDB 4 vue

매번 세팅 하면서 매번 까먹는 나에게 바치는 글

첫 세팅시

mkdir MDB5
cd MDB5
sudo npm install -g mdb-cli
mdb login
**** //<---ID
**** //<---PW
mdb init
npm install --save mdbvue

이후 작업은

MDB4 Pro Vue를 찾아서 다운
다운 받은 폴더명을 프로젝트 이름으로 변경
yarn (node_module 설치)
yarn run serve

1. public > index.html 수정
2. public > favicon.icon 변경
3. src > assets > css > main.css 추가
4. src > assets > fonts > NotoSansKR font 추가

// main.css에 추가
@font-face {
    font-family: 'NotoSansKR';
    src: url('../fonts/NotoSansKR-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

5. src > assets > images 폴더 추가
6. src > firebase > firebaseConfig.js 추가

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/firestore'
import 'firebase/functions'
import 'firebase/storage';

// Initialize Firebase
firebase.initializeApp({
    apiKey: "",
    authDomain: "
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
});

firebase.auth().languageCode = 'ko'

const auth = firebase.auth()
const firestore = firebase.firestore()
const functions = firebase.app().functions('asia-northeast3')

export { auth, firestore, functions, firebase }

7. src > layouts > admin, full-page, main 폴더 추가
8. App.vue 수정

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>

#app {
  font-family: 'NotoSansKR', Helvetica, Arial, sans-serif;
}
</style>

9. store.js 수정

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    firebase_uid: '',
    user_email: '',
    login: false,
    admin: false,
  },
  mutations: {
    setAdmin(state, data) {
      state.admin = data;
    },
    setEmail(state, data) {
      state.user_email = data;
      state.login = true;
    },
    setLogin(state, data) {
      state.firebase_uid = data;
      state.login = true;
    },
    setLogout(state) {
      state.firebase_uid = '';
      state.user_email = '';
      state.login = false;
      state.admin = false;
    }
  },
  actions: {

  }
})

10. main.js 코드 추가

import '@/firebase/firebaseConfig'
import '@/assets/css/main.css'

등등...