ㅊ
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('이름' , 인자 )
}
}
})
'개발 및 언어 > 뷰' 카테고리의 다른 글
| getters, mapGetters 쓰는 방법 및 용도(state, foreach는 덤) (0) | 2020.02.23 |
|---|---|
| Mixin( 공통적으로 사용하는 부분) (0) | 2020.02.23 |
| v-card (0) | 2020.02.19 |
| UserModify( checkout, onChange) (0) | 2020.02.18 |
| 뷰_실습(v-bind , v-model, props) (0) | 2020.02.09 |
