Vue-CLI 4를 사용한 JavaScript 개발 환경 구축 (프로토 타입 및 프로젝트 버전)
소개
이 기사는 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.
아래 화면이 표시되면 성공합니다 🙌
그럼 재미있는 자바 스크립트 생활을. . .
Reference
이 문제에 관하여(Vue-CLI 4를 사용한 JavaScript 개발 환경 구축 (프로토 타입 및 프로젝트 버전)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/cube_3110/items/9b846ce027171d304066
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
공식 문서 에도 쓰여져 있습니다만,
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.
아래 화면이 표시되면 성공합니다 🙌
그럼 재미있는 자바 스크립트 생활을. . .
Reference
이 문제에 관하여(Vue-CLI 4를 사용한 JavaScript 개발 환경 구축 (프로토 타입 및 프로젝트 버전)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/cube_3110/items/9b846ce027171d304066텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)