1. Vuetify 관련
태그 관련
- 최초 app.vue에 container 넣지 말것
- 넣으면 나중에 하부 컴포넌트 제어가 힘들다
- Fluid: 카드를 총 넓이에 맞춤, v-layout에 적용
- vuetify는 App.vue에서 항상 v-app으로 감싸야 한다.
공백 관련
- word-break:break-all; : 엘레멘트 크기에 맞춰 글 엔터
- justify-space-around: 엘레멘트 사이에 알아서 공백 추가
axios 요청 관련
- https로 띄워진 서버는 http endpoint와 통신할 수 없다.
- vue.js에서 axios요청을 할 때 마지막에 ‘/’를 붙여야 cors가 안난다
attribute 적용 관련
- div태그 안에 v-img 사용하면 안나온다.
- v-attr=”src: imageLink”로 사용
- flex 사용 justify-…는 각 요소에 적용하는 것이다
- 요소를 정렬할 때 div태그로 한번 묶고 적용
- vuetify에서 auto-grow는 row-height와 같이 적용해야 한다
- v-textarea에서 글 간격 조정이 들어가있으므로 id를 통해 적용
html class 선택 적용
<v-btn
:class="{'red-color': this.listPicked}" color="#FAFAFA"
flat outline>
<input type="submit" value="WRITE" @mouseover="listPick" @mouseleave="listPick">
</v-btn>
2. Vuex 사용 관련
Veux 사용 방법
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
loginModal: false,
},
mutations: {
setLoginModal(state, modal) {
state.loginModal = modal;
}
}
})
// main.js
Vue.use(Vuetify)
new Vue({
store,
render: h => h(App),
}).$mount('#app')
3. 기타 내용
- npm 빌드시 메모리 초과 에러 해결
- 자바 스크립트 메모리 관리
http://blog.naver.com/PostView.nhn?blogId=robot_fire&logNo=221455747433&from=search&redirect=Log&widgetTypeCall=true&directAccess=false
- created vs mounted
https://mygumi.tistory.com/201