PWA + Vue-CLI 3 학습하기 #1

From 

• Vue CLI
• @vue/cli-plugin-pwa
• Modern PWA with Vue-CLI 3 + Vuetify + Firestore + Workbox
• Vue.js + PWA + pre-render 프로젝트 틀 잡기 (legacy)
• Vue-Router 살펴보기
• CSS 뛰어넘기 (preprocessor)

Vue-Cli 설치하기

Vue-Cli 명령어를 사용하기 위해 설치를 합니다.

# install vue-cli
$ npm install -g @vue/cli
 
# update vue-cli
$ npm update -g @vue/cli
 
# yarn exsample
$ yarn global add @vue/cli
 
# version
$ vue --version

Create Vue project 

vue 명령어를 통해 새로운 프로젝트를 생성합니다.

$ vue create [project name]

Config Option

새로운 프로젝트를 생성하기 위한 설정입니다. 최종적으로 아래와 같이 이렇게 하였습니다.

선택의 몫은 자유입니다. 상황에 맞게 하시면 됩니다.

Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) 
 

마지막 엔터를 누르면 의존된 모듈과 함께 설치 후 실행 준비가 되었습니다.

이후 아래와 같이 실행하면...

$ cd pwa-vue
$ npm run serve

서버가 실행됩니다.

App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.25.44:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.

로컬주소로 접속해서 아래와 같은 화면이 나오면 성공입니다.