이번 글에서는 Vue.js 동작 순서에 대해서 글을 작성한다.
목차
1. Vue.js 동작 순서
1. Vue.js 동작 순서
Vue.js에서 npm run dev를 실행했을 때, 동작하는 순서를 간단하게 기록한다.
1) 가장 먼저, 프로젝트를 보게 되면 index.html이 실행된다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
</head>
<body>
<div>hihihihifdfdf</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2) index.html 실행 후에 main.js 로드를 한다.
index.html이 가장 먼저 실행이 된 다음에, main.js가 로드가 된다.
위의 index.html에서 div 태그 안에 있는 id app를 주시해야 한다.
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', // 마운팅 포인트 설정
router,
components: { App },
template: '<App/>'
})
main.js에서 Vue와 App, router를 import하고, 그 밑에 Vue 인스턴스를 생성하여 el로 index.html에 있는 div 태그에 있던 app을 마운팅 포인트로 설정한다는 말이다.
그 밑에, components와 template는 App을 사용하도록 설정한다.
template는 HTML 또는 CSS 등을 Vue의 인스턴스 데이터와 로직을 연결하여 화면에 보여줄 수 있도록 연결해 주는 속성이다.
3) main.js에서 Vue 인스턴스를 생성하고, App.vue를 마운팅 포인트로 설정한다.
main.js에서 Vue 인스턴스를 생성할 때, template를 <App/>으로 설정했는데, 아래의 App.vue에서 <template>를 가져와서 화면에 뿌려준다.
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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 태그 안에 <router-view/> 가 있다. 그러면, router-view는 router 경로에 있는 것을 가져 온다.
프로젝트 경로를 보니, router 경로에는 index.js에가 있다.
4) index.js를 가져 온다.
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
다시 Vue, Router, components 밑에 있는 HelloWorld를 import한다.
Vue 인스턴스에 Router를 사용한다.
routes에 path는 "/"로 되어 있는데, 우리가 localhost:8080을 실행하면 아무런 경로가 적혀 있지 않을 경우 HelloWorld를 렌더링하여 화면에 보여 준다. 컴포넌트로 HelloWorld를 가보자.
5) HelloWorld.Vue를 가져 온다.
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Vue.js의 실행 순서는 위와 같이 진행이 된다.
'IT > Vue.js' 카테고리의 다른 글
| [Vue.js] 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제 해결 방법 (0) | 2023.10.19 |
|---|---|
| [Vue.js] 윈도우 10(Window 10) Vue.js 설치하기 (1) | 2023.10.16 |
| [Vue.js] 이클립스에서 Vue.js template 설정하는 방법 (0) | 2023.05.09 |
| [Vue.js] 이클립스에서 Vue.js CDN 설정하는 방법(HTML) (1) | 2023.04.25 |
| [Vue.js] Vue.js에서 CDN caught TypeError: Vue is not a constructor 에러 해결 방법 (1) | 2023.04.25 |
| [Vue.js] 이클립스에서 Vue.js 개발 환경 세팅하는 방법 (0) | 2023.04.18 |
| [Vue.js] 윈도우 10(Windows 10)에서 Vue.js 설치하는 방법 (0) | 2023.04.18 |
| [Vue.js] Vue.js란? (0) | 2023.04.18 |
최근댓글