Vue.js - main.js 설명
2022. 11. 7. 12:53ㆍVue.js
반응형
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')index.html에서 body부분
<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>
npm run serve를 입력하고 가장먼저 실행되는게 main.js라고 생각하면 된다. vue 모듈에서 createApp이라는 메소드를가져오고 App.vue를 App으로 가져온다.
createApp메소드에 App을넣어서 앱을 생성하겠다는 의미이다. 그리고 mount를 통해서 public의 index.html에 있는 id가 app인 것을 찾아서 App.vue에다가 mount를 하겠다는 의미이다. 결국 작성할 코드들을 index.html 작성해 service가 되는거다
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>template 태그 안에는 html 태그가 작성되고 script 태그 안에는 javascript가 작성된다.
import HelloWorld from './components/HelloWorld.vue' 를 보면 components 밑에 HelloWorld.vue를 import해서가져왔다.
가져온 HelloWorld를
<HelloWorld msg="Welcome to Your Vue.js App"/> 와 같이 입력하여 사용했다.
반응형
'Vue.js' 카테고리의 다른 글
| Vue.js 라우터 (0) | 2022.11.08 |
|---|---|
| Vue.js - 프로젝트 수동 생성 (0) | 2022.11.07 |
| Vue - package.json 설명 (0) | 2022.11.07 |
| Vue.js 설치, 프로젝트 생성 (0) | 2022.11.07 |