Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기

개발에 필요한 요소들을 설치합니다.

node 설치

$ node -v
v10.16.0

vue-cli 설치

$ npm i -g @vue/cli
$ vue --version
3.9.2

yarn 설치

$ npm i -g yarn
$ yarn -v
1.17.3

git 설치

컴퓨터 껏다 켜야함

$ git --version
git version 2.22.0.windows.1

파이어베이스 설치

$ npm install -g firebase-tools
$ firebase --version
7.1.0

에디터 설치

파이어베이스 프로젝트 만들기

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
? Select a default Firebase project for this directory:
vf-hello-test (vf-hello-test)
? What do you want to use as your public directory? dist
+  Firebase initialization complete!

파이버에이스 서버에 올리기

$ firebase deploy
Hosting URL: https://vf-hello-test.firebaseapp.com

내용 변경해서 서버에 올리기

뷰 프로젝트 만들기

PS C:\Users\fkkmemi\Desktop\vf-hello-test> cd ..
PS C:\Users\fkkmemi\Desktop> 

기존 디렉토리를 뷰로 덮어쓰기 위해 상위로 갑니다.

뷰 생성

$ vue create vf-hello-test
$ ? Target directory C:\Users\fkkmemi\Desktop\vf-hello-test already exists. Pick an action: (Use arrow keys)
> Overwrite
  Merge
  Cancel

Overwrite를 골라서 덮어씁니다.

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

매뉴얼로 선택하고 Router와 Vuex를 추가해줍니다.

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

ESLint는 코드를 예쁘게 정리해줍니다. 기호에 맞는 것으로 3중 하나를 고르면 되지만 잘 모르니 그냥 Standard로 골라봅니다.

나머지는 모두 엔터를 쳐서 기본값으로 설치합니다.

헬로우 뷰

$ yarn serve

우아하게 꾸미기

$ vue add vuetify

엔터를 쳐서 모두 기본값으로 설치합니다.

$ yarn serve

바꿔보기

배포하기

$ firebase init
? What do you want to use as your public directory? dist

위에서 뷰 설치할 때 파이어베이스 관련파일이 사라졌으니 다시 초기화하고 배포합니다.

$ yarn build
$ firebase deploy

이제 dist 디렉토리에 파일이 쌓여있는 것을 볼 수 있습니다.

SPA답게 index.html 파일 하나만 있는 것을 확인할 수 있습니다.

이제 서버에 전송해서 확인해봅니다.

영상