그래봐야 코딩, 그래도 코딩

0%

Vue CLI를 이용해서 프로젝트 만들어보기.

작성일 Edited on In

들어가기

저번 포스트에서 Vue 개발환경을 설정했다.
이번에는 Vue CLI를 이용해서 간편하게 Vue 프로젝트를 만들어보자.
Node와 Vue-Cli를 미리 설치해야 한다.

Vue CLI(Commnad Line Interface) 란?

뷰 코어팀에서 제공하는 일종의 터미널용 도구이다.
저번 글에서 node를 설치한 뒤에 아래 명령어로, Vue CLI를 설치했다.

1
install vue-cli -global

Vue CLI를 설치하면 터미널에서 간단한 명령어를 통해서 프로토타입 프로젝트를 쉽게 만들수 있다.
(사실 처음 CLI라는 용어에 이건 뭐지? Vue 전용 터미멀 프로그램인가? 라고 혼동이 좀 왔었다.)

cmd창에서 vue 명령을 입력해서 위처럼 나와야 vue cli 설치가 된 것이다.

Vue CLI 프로젝트 생성 명령어

템플릿 종류 설명
vue init webpack 고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init webpack-simple 웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용
vue init browserify 고급 브라우저파리 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init browserify-simple 브라우저파이 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용
vue init simple 최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

webpack, browserify 같은 모듈 번들러 프로젝트는 자체적으로 Vue 로더를 포함하고 있다.
Vue 로더는 vue.확장자 파일을 HTML, SCRIPT, STYLE로 변환해 준다.
따라서 Vue 로더가 포함돤 프로젝트를 생성하면 Vue 확장자 파일을 사용 할 수 있다.

Vue CLI 로 webpack-simple 프로젝트 생성하기.

원하는 경로에 프로젝트 폴더를 생성하고, cmd로 그 경로로 이동하여 vue init webpack-simple 명령어를 입력하자.
나는 TestVue라는 폴더를 만들었다.

Vue init webpack-simple을 입력하고 프로젝트 관련된 설정을 입력해야한다.

해당 경로로 이동하면 폴더와 파일이 생성된 것을 확인 할 수 있다.

index.html: 뷰로 만든 웹 앱의 시작점. npm run dev 실생시 로딩되는 엔트리 파일이다.
webpack.config.js: 웹 팩 설정파일. 웹팩 빌드를 위해 필요한 로직들을 정의 하는 파일이다.
package.json: npm 설정파일이 있다. Vue 어플리케이션에서 필요한 라이브러리 정보를 포함하고 있다.

pakcage.json을 보면 알겠지만, 초기 프로젝트 생성시 npm intall을 이용해서 라이브러리를 받아야 한다.
cmd 에서 npm install 을 입력하자.

npm install을 입력한뒤, node_modules 폴더 생성을 확인하자.

package.json 파일 내부를 보면 아래와 같은데

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "name": "webpack-cli-template",
  "description": "vue project",
  "version": "1.0.0",
  "author": "hanumoka",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

scripts 부분을 보면 dev, build 명령어를 확인 할 수 있다.
npm run dev, npm run build 명령어가 등록되어 있다.

npm run dev를 cmd에 입력해 보면 webpack-dev-server(node 기반 웹서버) 가 자동으로 동작하며 자동으로 브라우저가 열리며(localhost:8080) 아래처럼 방금 생성한 Vue프로젝트가 열린다.(index.html)

npm run dev를 이용하여 Vue 프로젝트 실행하기.

서버가 실행되어 있는 동안 코드를 수정하면 바로바로 적용된다.
만 그대로 개발할때 사용하는 용도이다.

npm run build명령을 입력하면 dist폴더에 빌드 webpack이 빌드 결과물을 생성하는데, 이부분은 webpack에 대한 지식과 vue의 실제 배포방법을 몰라서 넘어가겠다.

조금더 공부하고, 다음글에서 위 Vue 프로젝트를 빌드 + 배포하는 방법을 알아보겠다.