Vue 웹앱프로젝트_1

## Vue 웹앱 프로젝트_1

---

- 기술참조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 . 사용-설치시 default 선택.(npm i -g yarn)
- 실행환경: yarn serve = npm run serve
- 배포환경: 구글파이어베이스 firebase deploy(필요:npm install -g firebase-tools)
- 결과확인링크: https://covid19-kr.web.app/
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)
---

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

- firebase init | deploy -> hosting 으로 생성한 Vue 프로젝트 배포.
- css framework 로 디자인 사용.($ vue add 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

- 작업결과(아래)

Ps. 참고사항

- 구글파이어베이스 와 Vue 프로젝트 관련성 (아래)

Ps2. 기존 리액트에서 사용한 개발환경 vscode세팅을 vue에서 그대로 사용

### 지금 쓰고 있는 전체 개발환경 vscode 세팅 확인(기존 자료 확인 : http://blog.daum.net/web_design/695 포스트 하단)

      기존 내용을 그대로 사용하고, 아래 내용 추가

//vue

  "vetur.format.defaultFormatterOptions": {

    "prettier": {

      "eslintIntegration": true,

      "singleQuote": true,

      "jsxBracketSameLine": true,

      "trailingComma": "none",

      "semi": false,

      "spaceBeforeFunctionParen": true

    }

  },

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "eslint.validate": ["javascript", "javascriptreact", "vue"],

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  "vetur.format.defaultFormatter.js": "vscode-typescript",

  "vetur.format.defaultFormatter.stylus": "stylus-supremacy"

  "prettier.tabWidth": 2,

  "prettier.useTabs": false,

  "prettier.semi": false,

  "typescript.format.insertSpaceBeforeFunctionParenthesis": true

주) 추가로 아래 npm 작업이 반드시 필요합니다.

- Cannot find module 'eslint-plugin-vue' error 때문에 npm install --save-dev eslint@5.16 으로 다운설치

### 리액티용 기존 확장 패키지에 vue용 3가지 추가

- Task Explorer : npm run start, npm run build, yarn serve 스크립트를 UI화면에서 버튼으로 실행.

- Ventur : Vue에 대한 스니펫 및 자동 완성 기능을 제공.

- vuetify-vscode : Vuetifyjs에 대한 스니펫 및 자동 완성 기능을 제공.

- Material Design Icons Intellisense (검색어 mdi) : <v-icon> </v-icon>아이콘 태그에 값을 넣을 때 편리하게 사용.

### 크롬브라우저용 리액트 devtool 처럼 vue 데브툴 확장프로그램을 설치(아래)

Ps3. 이번 포스트와 관련 없으나, 참고로 윈도우에서 파이썬이 필요할때... 윈도우 빌드 툴 설치하기.(아래)

npm install --global --production windows-build-tools
개발PC에서 python 경로추가: path= C:\Users\ilguk\.windows-build-tools\python27
확인: python --version