프로젝트 설치가 완료되면 많은 파일들이 생기게 된다.
여기서 중요한 파일들 몇가지를 살펴 보도록 하자
package.json
해당 파일은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다.
일반적으로 프로젝트의 제일 상단(루트) 부분에 존재한다.
"name": "project01",
"version": "0.1.0",
"private": true,해당 파일의 최상단에는 위 3개의 속성이 정의 되어져 있다.
name은 프로젝트 이름을 의미하고, version은 짐작하듯이 해당 프로젝트의 버전을 의미한다.
private라는 것은 npm(Node Package Manager) 사이트에 우리가 만든 프로젝트를 오픈소스로 공개할 것인지 여부를 정하는 부분으로 기본적으로는 true로 되어 패키지 메니저에 공유를 하지 않도록 설정한다.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}스크립트 부분은 npm 명령어로 실행할 때의 키워드 같은 것이다.
만약 npm run server라고 명령어를 치면 serve에 해당하는 명령이 수행된다.
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},패키지 정보는 2가지로 분류하여 명시를 하고 있다.
dependencies는 프로덕션 환경에서 응용프로그램에 필요한 패키지
devDependencies는 로컬 개발 환경에서만 필요한 패키지이다,
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]브라우저 환경을 명시하는 것으로
" > 1%는 " 상위 1% 브라우저들만 지원하겠다.
last 2 versions는 최근 2개의 버전만 지원하겠다.
not ie 11는 Internet Explorer 11은 지원하지 않겠다는 것을 의미한다.
main.js
src 폴더의 하위에 존재한다.
npm run serve를 실행하면 가장 먼저 실행하는 파일이다.
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')App.vue를 불러와서 createApp으로 실행하는데, index.html의 ID가 #app인 부분 하위에 마운트를 하겠다는 것을 의미한다.
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
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"></div>
<!-- built files will be auto injected -->
</body>
</html>Vue는 SPA (Single Page Application)으로 index.html 파일 하나만으로 모든 화면을 구성한다.
프로젝트를 구동하면 #app안에서 작동하며 모든 컴포넌트는 동적으로 자바스크립트로 화면에 표시가 된다.
