vue CLI

1. 시작하기

1-1. ※참고문헌

1-2. view CLI 설치

• 노드, npm 버전 확인하기

PS C:\Users\DKSYSTEMS\Desktop\learn-vue-js-master (2)> node -v
v18.13.0
PS C:\Users\DKSYSTEMS\Desktop\learn-vue-js-master (2)> npm -v
8.19.3

• 설치하기
  npm install -g @vue/cl

2. 설치 & 실행

후 브라우저에서
http://localhost:8080/ 입력하면

열림. 여기서 개발자 도구 열기

3. CLI 폴더 구조 확인

3-1. $mount API

new Vue({
    
}).$mount('#app')

와

new Vue({
    el:'#app'
})

는 같다

3-2. render 문법

new Vue({
    //이 역할과
    render: h => h(App),
    //이 역할이 동일하다
    components: {
        'app': App
    }
}).$mount('#app')

4. .vue 파일 형식

.vue라는 확장자로 만든 파일

<!-- vue입력 후 tab누르면 자동으로 완성되는 형식  -->
<template>
<!-- HTML -->
</template>

<script>
export default {
    //jacascript
    methods:{
        addNum: function(){

        }
    }
}
</script>

<style>
/* css */
</style>

App.vue

<template>
  <div id="app">
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>         <!--  <hello-world>Welcome to Your Vue.js App</hello-world>와 같다  -->
  </div>
</template>

<script>
//컴포넌트 내용을 들고와서
import HelloWorld from './components/HelloWorld.vue'
//컴포넌트를 사용한다
export default {
  name: 'app',
  components: {
    HelloWorld,
    'hello-word': HelloWorld,
  }
}
</script>

HelloWorld.vue

<script>
//이거랑
var HelloWorld = {
  props: ['propsdata']
}
//이거랑 같음!
export default {
  name: 'HelloWorld',
  props: {
    msg: String     //prop validation이라고 type까지 들어간 것 뿐 위와 같음!
  }
  //이거랑 같음
  //props: ['msg']
}
</script>

5. 서버 종료

ctrl + c