Vue CLI 4.x 기본 앱 만들기

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 된 파일이 생성된다