티스토리 뷰

dev/vue3

Vue CLI: 뷰 프로젝트 생성 도구 및 구조 약간 설명

dev_0hoon 2025. 1. 4. 20:36

https://cli.vuejs.org/

 

Vue CLI

 

cli.vuejs.org

 

공식 사이트 이다.

 

npm install -g @vue/cli-init

-g는 글로벌을 뜻한다고 함. global은 OS레벨로 설치가 된거기에 현재 폴더가 아닌 전체 컴퓨터 내에서 사용한다는 뜻이다.

 

npm은 노드패키지매니저

vue create vue3-app

 

설치가 되면

cd vue3-app으로 이동

npm run serve로 실행한다.

 

여기서 serve의 의미는 패키지 내의 package.json의

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 

serve를 사용했다고 보면 된다.

 

 

먼저 public > index.html 를 살펴보면

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
        <!-- 이 안에 표시되는 결과물이 Vue CLI로 빌드된 결과물이다. -->

    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

다음처럼 익숙한 구조가 눈에 보인다. #app 인데 script 없이 내용이 나오고 있다. VueCLI로 빌드된 결과물이 표시된거 같은데.. 대충 어떤식으로 진행될지는 느낌이 오긴한다.

 

src의 파일들의 조합이 표시될 듯 하다.

 

src> main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 

여기를 보면 익숙한 코드가 보인다 creatApp과 mount 부분이다. 여기서 app이 꼿히게 된다.

 

1) import 구문부터 살펴보자 from 'vue'에서 vue 는 라이브러리의 이름이다.

2) package.json 을 열어보면

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },

 

라이브러리가 있고 vue가 있다. 만약 vuejs면 vuejs로 들고 왔을 것이다.

3) import {createApp} 부분은 사실 

const {createApp} = Vue;

와 같은 말이다. Vue 객체에서 createApp을 꺼내 쓰겟다. 라는 말이 된다.

 

4) from에 파일을 들고 올 수도 있다. from './App.vue' 로 싱글파일컴포넌트를 들고올 수 있는데. .vue로 된 파일들이다.

 

5) import App은 ./App.vue의 내용을 그대로 App라는 변수에 담는다고 생각하면 된다.

 

6) createApp(App)이면 그대로 ./App.vue 내용을 #app에 넣는다고 생각하면 된다.

 

'dev > vue3' 카테고리의 다른 글

v-model, v-on:submit 및 axios  (0) 2025.01.05
Vue single file component 소개  (1) 2025.01.05
same level low component끼리의 데이터 이동  (0) 2025.01.04
이벤트 발생 Emit  (0) 2025.01.04
props 속성  (0) 2025.01.04
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
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
글 보관함