본문 바로가기

JavaScript/Vue.JS

vue-cli 보일러플레이트

1. 보일러플레이트란


최소한의 변경으로 재사용할 수 있는 프로젝트 템플릿




2. vue-cli 란


vue.js 프로젝트의 폴더 구조와 설정을 어떻게 할 것인지 템플릿 생성 도구




3. vue-cli 보일러플레이트 생성


1

 node.js를 설치

2

 터미널(cmd) 실행

3

Window

 npm install -g npm

 npm 최신 버전으로 업그레이드

 npm install -g vue-cli

 vue-cli 설치

macOS

 sudo npm install -g npm

 npm 최신 버전으로 업그레이드

 sudo npm install -g vue-cli

 vue-cli 설치

4

 

 vue list

 프로젝트 템플릿 종류 보기

 vue init simple (생성할 디렉토리이름)

 간단한 템플릿 생성

 vue init browserify (생성할 디렉토리이름)

 browserify 번들러와 vueify 의 조합

 vue init browserify-simple (생성할 디렉토리이름)

 browserify 의 간단한 템플릿

 vue init webpack (생성할 디렉토리이름)

 webpack 번들러와 vue-loader 의 조합

 vue init webpack-simple (생성할 디렉토리이름)

 webpack 의 간단한 템플릿 

 vue init pwa (생성할 디렉토리이름)

 PWA 개발을 위한 템플릿

5

 

 cd (생성한 디렉토리이름)

 디렉토리 진입

6

 

 npm install

 의존성 패키지 설치

7

 

 npm run build

 번들링된 파일 생성

 npm run dev webpack 개발 서버에서 실행


'JavaScript > Vue.JS' 카테고리의 다른 글

인스턴스와 컴포넌트  (0) 2018.06.29
디렉티브  (0) 2018.06.27