Vue CLI 4.x 기본 앱 만들기

Posted on Edited on In , Word count in article: 413 Reading time ≈ 2 mins.

Vue CLI 를 이용한 기본 앱 만들기

Vue.js - 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 (그냥 React.js 같은 Javascript Framework)
Vue CLI - @vue/cli Vue.js 개발을 위한 표준 Tooling (터미널에서 Vue 명령을 제공한다)
Vue CLI Service - @vue/cli-service CLI Plugin 을 load 하는 core service, internal webpack config, serve, build, inspect 명령을 제공

설치

Vue CLI 를 설치한다

1
2
3
4
npm install -g @vue/cli @vue/cli-service-global

#기존에 설치했으면 upgrade 한다
npm update -g @vue/cli @vue/cli-service-global

Vue CLI 프로젝트 생성

1
vue create first-vue-app

Vue CLI v4

프로젝트 생성 완료

1
2
3
4
5
🎉  Successfully created project first-vue-app.
👉  Get started with the following commands:

 $ cd first-vue-app
 $ npm run serve

프로젝트 생성이 되면 다음과 같은 기본 폴더와 파일 구조가 생성되어 있다

1
2
3
4
5
6
7
8
9
10
11
cd first-vue-app

first-vue-app
├── README.md
├── babel.config.js
├── coverage
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

개발서버 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
npm run serve


## 아래같이 localhost 로 접근가능하게 서버가 실행됩니다.
 DONE  Compiled successfully in 1905ms                                                                                                  4:09:00 PM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.178.163:8080/

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

모듈 추가

1
2
3
4
5
6
7
## plugin 을 추가 하는 명령은
vue add 플러그인명

## 예를 들면
vue add eslint
vue add router
vue add apollo

eslint 설치

1
vue add eslint

eslint 설치결과

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
📦  Installing @vue/cli-plugin-eslint...

+ @vue/[email protected]
updated 1 package in 6.18s

76 packages are looking for funding
  run `npm fund` for details

✔  Successfully installed plugin: @vue/cli-plugin-eslint

? Pick an ESLint config: Prettier
? Pick additional lint features: Lint on save

🚀  Invoking generator for @vue/cli-plugin-eslint...
📦  Installing additional dependencies...

added 7 packages from 7 contributors and updated 1 package in 7.139s

76 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-eslint

빌드

product 용으로 파일을 build 한다

build 를 실행하면 webpack 을 통해 프로젝스 소스를 번들링하여 dist 디렉토리에 넣어준다

빌드 실행

1
npm run build

빌드 결과

1
2
3
4
5
6
7
8
9
10
11
12
DONE  Compiled successfully in 3966ms     4:32:39 PM

 File                                 Size                                                Gzipped

 dist/js/chunk-vendors.1fe9aaec.js    90.33 KiB                                           32.39 KiB
 dist/js/app.f1ac53ef.js              4.58 KiB                                            1.64 KiB
 dist/css/app.09e84613.css            0.33 KiB                                            0.23 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

dist 폴더에 build 된 파일이 생성된다