소개

이 기사는 JavaScript Advent Calendar 2019의 22 일째 기사입니다.

안녕하세요, 큐~부입니다.
조금 전에 Vue CLI4가 출시되었습니다.
Vue CLI4의 특징이나 3으로부터의 변경점 등은 이하가 비교적 알기 쉽다고 생각합니다.
Vue.js CLI 4 릴리스

로컬 환경에서 JavaScript를 만지고 싶었기 때문에 모처럼이므로 새로워진 Vue-CLI4로 환경 구축을 하려고 합니다.
기본적으로는 공식 참조 에 따라 갑니다.

↓Vue-CLI4 소스 코드
htps : // 기주 b. 코 m / ゔ 에 js / ゔ 에 ぃ / ぇ 아세 s

2019년 12월 현재 최신 버전은 v.4.1.1입니다.

설치

공식 문서 에도 쓰여져 있습니다만,

Vue CLI 설치에는 전제로 Node.js 버전 8.9 이상 (8.11.0 이상 권장)

필요합니다.
Node.js가 들어 있지 않은 사람은 Node.js에서 설치하십시오.

이하 기사를 알기 쉽기 때문에 참고해 보세요.
Mac에 Node.js 설치

Vue-CLI 설치

프로토 타입 버전

공식 참조 명령을 따라 입력합니다.vue serve 와 vue build 로 간단한 프로토타입을 만들 수 있습니다.
조금 처리를 확인하고 싶다든가 그럴 때 편리합니다.

$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.1.1
$ npm install -g @vue/cli-service-global
$ touch App.vue

App.vue

<template>                                                                                                                                                                                              
　<h1>Hello!</h1>
</template>

$ vue serve
 INFO  Starting development server...
98% after emitting

 DONE  Compiled successfully in 1653ms                                                                                                                                                              11:18:54


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://**.**.***.**:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

화면에 더 이상 표시할 수 있었습니다!

$ vue build
⠧  Building for production...

 DONE  Compiled successfully in 2432ms                                                                                                                                                              11:42:08

  File                                 Size               Gzipped

  dist/js/chunk-vendors.548bada6.js    65.55 KiB          23.58 KiB
  dist/js/app.e2adb5ac.js              1.78 KiB           0.89 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

간단한 JavaScript를 가볍게 움직이고 싶다면 여기까지하고 있으면 문제 없습니다!
Vue.js에서 본격적으로 개발하고 싶다면 다음과 같은 프로젝트를 만들 수 있습니다.

프로젝트 버전

Vue-CLI4로 프로젝트 만들기

$ vue create hello-world
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No
Vue CLI v4.1.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: 
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 
? Save this as a preset for future projects?

자꾸 이런 느낌으로 만들어 갑니다.

①사용할 기능의 선택

Babel 와 ESLint 가 들어 있는 디폴트를 선택하는지 매뉴얼에서 필요한 기능을 선택한 것을 사용하는지의 선택이 됩니다.

○ 기본

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

○ 매뉴얼

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

②ESLint 프리셋 선택

· ESLint with error prevention only (오류 방지 전용)
· ESLint + Airbnb config (Airbnb 설정)
· ESLint + Standard config (표준 설정)
· ESLint + Prettier (ESLint와 Prettier의 병용)

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

③추가 Lint 기능 선택

· Lint on save (저장시 Lint 실행)
· Lint and fix on commit (커밋시 Lint 실행)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

④Babel이나 ESLint등의 설정의 배치 개소의 선택

・In dedicated config files(전용의 설정 파일내)
・In package.json(package.json내)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

⑤ 지금까지의 설정을 프리셋으로 저장할지 선택

? Save this as a preset for future projects? (y/N)

```terminal
? Save preset as: 

여기에서 설정해 두면 다음부터 vue create 로 프로젝트를 만들 때, 또 새로 설정할 필요가 없어져, 설정한 프리셋을 그대로 사용할 수 있습니다.

다음 화면이 터미널에서 표시되면 안전 설치 완료됩니다 🙌

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd hello-world
 $ npm run serve

서버 시작

 $ cd hello-world
 $ npm run serve
 DONE  Compiled successfully in 1222ms                                  23:48:57


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://xxx.xxx.x.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

아래 화면이 표시되면 성공합니다 🙌



그럼 재미있는 자바 스크립트 생활을. . .