뷰 개발환경 ( 3.x- >4.x )

ㅊ

3.x버전과 4.x 버전은 많은 차이가 있다. 

기존 store.js를 4버전에서는 store/index.js로 바꿔서 쓰고,. 

여러 변화들이 존재한다. 

 

VUE 개발환경 세팅 
1. vue cli : 뷰 개발환경을 빠르게 구축하도록 해주는 것. 
2. 3대와 2대의 비교,. 
3. 이 후에 설치를 받고 , vue create 프로그램명  

npm_modules ( 부품을 넣어두는 곳 ) 
package.json( 주문서 : 여기에 뭐가 필요한지 넣어두면, 모듈에서 자동으로 생성. )


assets: img 저장소.

src 안에 
App.vue 기본 파일. 
main.js : 구동 시켜주는 파일.
router.js : 라우터 조절
store.js  : 전역 상태 값을 조절. 

<<기본 배경>>
원래는 npm dev를 통해서  실행시켰다면, 
3.대 부터는 npm serve를 통해서 실행 시킨다. 

plugin (플러그인) => vuetify 기본. 
@vue/cli-plugin- 
이걸 쓰면 어떻게 바뀔까? 
부트 스트랩과 같은 역할을 하는데 , 컴포넌트 단위로 돌아간다. 
[기존 explore에서는 제공안함.]

vue-cli-plugin-vuetify // 여기를 통해서 뷰티파이 설치가능. 

npm run build 하는 이유? dist 파일 생성 -> 배포의 목적. 
div- > app
//컴포넌트 단위이기 때문에 , 객체 data:[] 형태가 아닌, 
data(){} , 함수 형태로 쓴다. 
data () {
} 

---

vue 

eventbus를 쓸 때, 유의 점. 

created를 통해서 이벤트의 변화를 듣는다. 

 

<받는 곳>
created()
{
	eventBus.$on('보낸신호의 이름', 콜백함수)
}

콜백함수는 ()=>{} 이렇게 쓴다. 

//기본 형태. 
created()
{
	eventBus.$on('받은 신호의 이름', ()=>{})
}
//인자가 있는 경우. 
created()
{
	eventBus.$on('받은 신호의 이름(abce)', (date)=>
    {
    	this.xxx = dae
    })
}


<보내는 곳_ 하나인 경우> 
eventBus.$emit("보낼신호 이름(abce)", new Date())

<중간 다리 main.js_ 하나인 경우>
export const eventBus = new Vue() //라고 써준다. 
//새로운 뷰 인스턴스를 생성해서 값을 내본다는 뜻. 



<보내는 곳.vue_ 여러 곳인 경우>
eventBus.example_function(new Date())

<main.js>
export const eventBus = new Vue({
	methods:{
    	example_function(인자) //보내는 곳의 함수이름
        {
        	this.$emit('이름' , 인자 )
        }
    }
})