Vue.js19 [Vue.js] 빌드 & 배포파일 생성 빌드 & 배포파일 생성 Vue로 작성한 코드를 빌드를 하고 싶은 경우에는 npm run build 명령어를 통해서 빌드를 할 수 있습니다. dist폴더가 생성이 되고 js, css파일이 생성이 됩니다. 즉, 최종적으로 서버에는 dist폴더 하나만 업로드하면 됩니다. dist/js router에서 설정한 webpackChunkName들이 File에 파일명으로써 묶여서 js파일이 만들어지는 것을 볼 수 있습니다. webpackChunkName을 설정하지 않은 router들은 app.js로 들어가게 됩니다. dist/css vue 파일 내부에 style 태그로 css를 추가한 경우에 따로 css파일을 만들어줍니다. 2022. 8. 15. [Vue.js] Vuex Vuex Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다. 모든 컴포넌트를 위한 중앙 집중식 저장소를 제공해 줍니다. 그렇기 때문에 중앙 저장소에 저장된 데이터는 쉽게 바꿀 수 있는게 아니고, 특정 함수(mutations, actions)를 통해서만 데이터 변경이 가능하게하고 변경 상태를 관리할 수 있습니다. Vuex 사용법 state, getter, mutations, actions, modules로 상태를 관리합니다. state : vue에서의 data영역과 같은 역할을 합니다. getter : vue에서의 computed영역과 같은 역할을 합니다. mutations : state의 데이터를 바꿀수 있는 유일한 역할을 합니다. actions : mutations 하고 .. 2022. 8. 13. [Vue.js] 플러그인 플러그인(Plugin) 플러그인은 일반적으로 전역 수준 기능을 Vue에 추가합니다. 플러그인에는 엄격하게 정의된 범위는 없습니다. 일반적으로 작성할 수있는 플러그인에는 여러 유형이 있습니다. 뒤에 나오는 예제는 다국어를 처리하는 예제입니다. 폴더구조 project |--src |--i18n ||--ko.js ||--en.js |--plugins ||--i18n.js |--views ||--advanced | |--PluginView.vue |--main.js ko.js const i18nEN = { hi: '안녕하세요', search: '조회', save: '저장', } export default i18nEN en.js const i18nEN = { hi: 'Hello', search: 'Search',.. 2022. 8. 10. [Vue.js] Mixin Mixin(믹스인) Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. 폴더구조 project |--src |--mixins ||--formatter.js |--views ||--advanced | |--MixinView.vue 작동방식 일반적이 .vue파일은 script태그 안에 javascript코드를 별도로 만듭니다. 예를들어 script안의 코드가 다른 파일에도 쓰여 재사용을 많이 해야하는 경우에 Mixin의 사용이 고려됩니다. 사용 방법은 js파일을 만들어 script태그안에 들어가야했을 코드를 작성하고.. 2022. 7. 29. 이전 1 2 3 4 5 다음
