0510Vuecli
초반 셋팅하기
vue create first-vue-app .
후에 선택창이 뜨면 첫번째 Default([vue 2] babel, eslint) 를 선택해 줍니다.
cd first-vue-app
ls
했을때 git 폴더? 같은 얘들이 떠야함! (폴더가뜨면 안된다!)
npm run serve
위코드로 서버 키기!
yarn 이란 것을 깔면 더빠르다
서버 들어가기
http://localhost:8080/ 에 들어가서 "Welcome to Your Vue.js App"가 뜨면 성공!
gitignore 셋팅
https://www.toptal.com/developers/gitignore에서 node_modules가있어야하는데
node, vue 를 검색하여 넣어주자
vue cli 를 왜쓸까?
- 우리는 sw엔지니어가 될사람이기때문이다.
- 유지보수를 해야하기때문에
- XD때문이다.***
- java, python, c++ 과 같이 사용할수있도록 하는 것이다.
node_modules 폴더 = packase들이 닮길 폴더이다. 절때로 git에 올라가면 안댐!
package.json = 노드를 통해서 파일을 작성하게되면 생기게되는 file 이다.
babel.configs.js = ES6를 이용해서 개발할 것인데 이녀석은 ES5로 과거의 문법으로 돌려서 사용하게하여 지원하지 않는 브라우져도 사용할수있게금해줍니다
public 폴더 = CSS, Images 가있다.
여기서 html로 이동하여 확인해보면
<div id="app"></div>
여기 안에 모든 컴포넌트가 들어갈 예정이다.
src > main.js = 시작점
src > App.vue = 생소한 확장자. 존재하지 않는 확장자이다. mapping 친구가 쓸수있게끔 해줬다.
singlefile component 하나의 파일안에서 template, script, style을 한번에 사용할수 있다.
<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>
hello world가 있을건데 app.vue 에서
홈페이지 들어가서 개발자 도구 킨다음 vue탭을 열어보자.
componenets 에서 vue 만들어주기
componenets > Apps
import Parent from './componenets/Parent'
app vue > chiled 등록 par
APP >parent > 자식들
자식은 부모에게 받기만 할수있고 조작할수없다.
app에서 받은 데이터를 읽기만 가능하다.
단방향 data flow
부모와 자식의 연결 데이터를 Props 라한다.
app 밑에 aprent 자식으로 childe 와 orPhan 이있다
vue 탭
최상위 div 만들어주고 이름 지어주기;
export default {
name: 'Orpahn',
}
나올수 있도록 글자 해주기
<div> <h1>Orpahn</h1> </div>
불러올수있도록 parent에서 import
app
<template> <div id="app"> <Parent :parent-message="message" /> </div></template><script>import Parent from './components/Parent' // 1. 컴포넌트를 불러온다.export default { name: 'App', components: { Parent, // 2. 등록한다. }, data: function() { return { message: '밥은 먹고 다니냐?', } },}</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>
parent
<template> <div> <h1>Parent</h1> <p>From parent: {{ parentMessage }}</p> <Child/> <Orphan/> </div></template><script>import Child from './Chiled.vue'// 불러온다.import Orphan from './Orphan.vue'export default { name: 'Parent', components: { Child, Orphan, }, props: { parentMessage: String, },}</script><style></style>
child
<template> <div> <h1>Child</h1> </div></template><script>export default { name: 'Child',}</script><style></style>
orphan
<template> <div> <h1>Orpahn</h1> </div></template><script>export default { name: 'Orpahn',}</script><style></style>