Vue-CLI 프로젝트 만들기

저는 "4"버전으로 프로젝트를 만들고

프로젝트 구조를 이해하는 시간을 가졌습니다..😂

---

1. 설치

일단 1,2버전의 vue-cli가 설치되어 있다면 제거 후 최신버전으로 설치해주세요.

패키지명이 바뀌어서 1,2 버전은 vue-cli이고 3,4버전은 vue/cli입니다.

설치 후 버전 확인까지 되면 끝! 저는 @vue/cli 4.1.1 이렇게 뜹니다.

(@은 NPM에 최근에 도입된 Scoped package를 의미)

npm r -g vue-cli
npm install -g @vue/cli
vue --version

2. 프로젝트 생성

포트폴리오 사이트를 위한 프로젝트기 때문에 프로젝트 이름은 'hyem-portfolio'로 설정했습니다.

'vue create 프로젝트명' 명령으로 프로젝트 생성이 완료되면 해당 디렉토리로 이동해서 서버를 구동시키라고 뜹니다.

vue create hyem-portfolio

Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)

Vue CLI v4.1.1
✨  Creating project in C:\nhmdev\VuejsStudy\hyem-portfolio.
⚙  Installing CLI plugins. This might take a while...

(쪼로로록..설치되는게 뜸, 생략)

�🎉  Successfully created project hyem-portfolio.
�👉  Get started with the following commands:

 $ cd hyem-portfolio
 $ npm run serve

3. 개발 서버 구동

서버를 구동시키고 완료되면 http://localhost:8080/가 구동중이라고 뜹니다.

접속해보면 Vue 로고와 함께 Welcome to Your Vue.js App라는 메세지가 보입니다.

npm run serve

> hyem-portfolio@0.1.0 serve C:\nhmdev\VuejsStudy\hyem-portfolio
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 8683ms                                                                                        3:33:45

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

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

4. 모듈 추가 (Router)

저는 Vue Router도 사용하기 위해서 추가했습니다.

설치가 완료되면 추가되거나 변경된 파일이 쭉 뜹니다!

vue add router
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

�📦  Installing @vue/cli-plugin-router...

+ @vue/cli-plugin-router@4.1.1
updated 1 package and audited 24616 packages in 20.477s
found 0 vulnerabilities

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

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

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

added 1 package from 1 contributor and audited 24617 packages in 18.347s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router
   The following files have been updated / added:

     .gitignore
     README.md
     babel.config.js
     package-lock.json
     package.json
     public/favicon.ico
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/main.js
     src/router/index.js
     src/views/About.vue
     src/views/Home.vue

   You should review these changes with git diff and commit them.

5. 상용빌드

마지막으로 npm run build를 실행하여 상용 배포를 위한 빌드를 해보겠습니다.

빌드를 실행하면 Vue CLI가 웹팩을 통해 프로젝트의 모든 소스 파일들을 번들링하여 dist 디렉토리에 넣어줍니다.

npm run build

> hyem-portfolio@0.1.0 build C:\nhmdev\VuejsStudy\hyem-portfolio
> vue-cli-service build


/  Building for production...

 DONE  Compiled successfully in 19581ms                                                                                       3:42:10

  File                                 Size               Gzipped  

  dist\js\chunk-vendors.66c165cf.js    115.12 KiB         40.60 KiB
  dist\js\app.959ec311.js              5.97 KiB           2.23 KiB 
  dist\css\app.3c0b035c.css            0.42 KiB           0.26 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

6. 최종 프로젝트 구조

빌드까지 마치고 난 후 프로젝트 구조입니다.

.
├── .gitignore
├── README.md
├── babel.config.js
├── dist/
├── node_modules/
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │	├── index.js
    └── views
        ├── About.vue
        └── Home.vue

• build/: webpack 빌드 관련 설정
• config/: 프로젝트에서 사용되는 설정
• dist/: 배포버전의 Vue 어플리케이션 파일
• public/
  ├──favicon.ico
  ├──index.html: 어플리케이션의 뼈대가 되는 html파일
• src/
  ├──App.vue: 최상위 컴포넌트
  ├──assets/: 이미지 파일 및 기타자원
  ├──components/: 컴포넌트들
  ├──main.js: Vue인스턴스를 생성
  ├──router/: 라우터 설정
  ├──views/: 라우터 페이지

---

 

참고 사이트

- Vue CLI 3 사용법

- Vue.js 프로젝트 구조

- Vue CLI 공식 문서

---

Vue에 대한 전반적인 이해가 완료된 후여서

프로젝트 구조를 파악하는건 금방 가능했습니다ㅎㅅㅎ