vue : 프론트 - java, ecma6, typescript 방식
vue 작성방법 : cli 작성 방법 : 프로젝트를 따로 생성하고 코드 작업 html로 변환 해 줘야함
vue2를 사용
cmd 에서
버전 확인
cd로 vue 폴더로 이동한다음 설치
프로젝트 만드는 방법
use npm 사용
프로젝트 생성 완료
두 코드를 차례로 실행 시키면 됨
서버 가동 성공
여기서 src만 바꾸면 바꾼 내용으로 실행 가능
서버 끄는 법
cmd 에서 ctrl + c 를 여러번 누르면 됨
yarn serve
이걸로 돌려도 잘 돌아감
귀찮으니깐 visual studio에서 실행할꺼임
이렇게 하면 cmd 창이랑 동일함
뜨는 창은 기본 인터넷 창이 뜸
포트가 이미 사용중이면 알아서 다른 포트로 만들어줌
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</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
style : css
매번 src으로 만들고 이름을 바꿀꺼임
App.vue
<template>
<div id="app">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
components/HelloWorld.vue
<template>
<div>
hello
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
부모컴포넌트 <br>
<HelloWorld/>
</div>
</template>
components/HelloWorld.vue
<template>
<div>
자식 컴포넌트 hello
</div>
</template>
