상세 컨텐츠

본문 제목

Vue 웹앱프로젝트_2

노드js·자바스크립트

by 김일국 2020. 4. 5. 17:37

본문

## Vue 웹앱 프로젝트_2

---

- 기술참조1: Front-end 간단한 게시판 구현 ( VueJs + Vuetify). https://dollvin.tistory.com/61
- 기술참조2: Vue와 Firebase로 모던웹사이트 만들기. https://fkkmemi.github.io/talk/vf-000-intro/
- 개발언어: Vue(Javascript 문법 확장판)
- 개발환경: VSCode IDE사용, vue create . 사용-
- Vue 프로젝트 설치시 vue-router, vuex 선택 이후 모두 default 선택.
- 실행환경: yarn serve = npm run serve (필요: npm i -g yarn)
- 배포환경: 구글파이어베이스 firebase deploy(필요:npm install -g firebase-tools)
- 결과확인링크: https://covid19-kr.web.app/
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)

---

### 20200405 작업내역(아래)

- vuetify 패키지 재설치 설치 옵션 (아래)
- Choose a preset: Configure (advanced)
- Use a pre-made template? (will replace App.vue and HelloWorld.vue) No //Y로 선택하면 router가 안됨.
- Use custom theme? No
- Use custom properties (CSS variables)? No
- Select icon font - Material Icons
- Use fonts as a dependency (for Electron or offline)? Yes
- Use a-la-carte components? No
- Use babel/polyfill? Yes
- Select locale - Korean
- firebase login 후 firebase init(한번만 하면됨) 이후는 firebase deploy
- firebase init 옵션(아래)
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes //를 해야지만 vue라우트가 작동함.
- File dist/index.html already exists. Overwrite? No //주의 Yes하면, Vue에서 작업한 것이 아닌, firebase 초기파일로 덮어 쓰게 됩니다.
- Skipping write of dist/index.html



### 라우트 실행결과(아래)


관련글 더보기

댓글 영역