2. Vue와 Firebase로 개발하는 서버리스 PWA myBlog - vue create

myBlog 프로젝트 만들기

 

개발 도구로 Visual Studio Code를 사용 합니다.

vue-cli로 프로젝트를 생성합니다.
Vue CLI가 설치되어 있지 않다면 아래 명령어로 설치합니다.
(전역 설치가 필요하므로 -g 플래그를 사용합니다.)

npm install -g @vue/cli

 

vue create 명령어를 사용하여 새 프로젝트를 생성합니다.

1. 프로젝트 설정

vue create myblog

 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

2. vuetify 설치

cd myblog

vue add vuetify

 

? Choose a preset: (Use arrow keys)
Vuetify 2 - Configure Vue CLI (advanced)
> Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
Vuetify 3 - Vite (preview)
Vuetify 3 - Vue CLI (preview)

3. Firebase 설정

npm install firebase

 

우리는 데이터베이스로 firestore를 사용하고, 사용자 인증을 위하여 Firebase Authentication를 사용합니다.
firebase 설정에 firestore, Firebase Authentication 설정을 추가 합니다.

4. 실행

생성된 프로젝트 폴더에서 개발 서버를 실행합니다.

npm run serve

 

개발 서버가 실행되고 브라우저에서 http://localhost:8080을 통해 프로젝트를 확인할 수 있습니다.