Vue.js

Vue CLI 프로젝트 기본 구조 이해

tmxhsk99 2022. 7. 5. 05:36

 

Index.html

<!DOCTYPE html>
<html lang="ko">
  <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>

여기에 app 태그가 있음

 

Main.js

import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')

여기서 vue 와 app.vue를 import해서

<div id=app> 태그에 app.vue 파일을 렌더링함

 

App.vue

<!--html 영역-->
<template>
  <!-- 탬플레이트에는 하나의 엘리멘트만 있어야한다. -->
  <div>
  <!--{{ str }}-->
    <app-header></app-header>
    <app-header></app-header>
  </div>
</template>
<!--자바스크립트 영역-->
<script>
import AppHeader from "./components/AppHeader.vue";
export default {
  data: function () {
    return {
      str: 'hi'
    }
  },
  components:{
    'app-header' : AppHeader
  }
}
</script>
<!-- css 영역 -->
<style>


</style>

App 태그에 렌더링할

Html ,css, 스크립트가 있음

 

Html 은 작성한 컴포넌트를 import해서

쓸수 있음

 

여러 컴포넌트 쓰는 케이스

<!--html 영역-->
<template>
  <!-- 탬플레이트에는 하나의 엘리멘트만 있어야한다. -->
  <div>
  <!--{{ str }}-->
    <app-header></app-header>
    <app-content></app-content>
  </div>
</template>
<!--자바스크립트 영역-->
<script>
import AppHeader from "./components/AppHeader.vue";
import AppContent from "./components/AppContent.vue";
export default {
  data: function () {
    return {
      str: 'hi'
    }
  },
  components:{
    'app-header' : AppHeader,
    'app-content' : AppContent
  }
}
</script>
<!-- css 영역 -->
<style>


</style>

일단 선언만하고 안쓰는 건 에러남 일단 선언하면 무조건 써야된다.