진스

vuejs.org/v2/guide/plugins.html#ad Plugins — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 1. install 메소드를 이용한 방법 plugins - ChartPlugin.js 생성 import Chart from 'chart.js'; export default { install (Vue){ Vue.prototype.$_Chart = Chart; } } main.js 내 위에 파일 임포트 및 사용 import ChartPlugin form './plugins/ChartPlugin.js'; Vue.use(ChartPlugin); barChart.vue(다른 vue파일) 파일내에서 접근 다른곳에서 이제 im..

방법 1. 1-1 . 함수를 변수로 넣어놓고 const spinner = (to, from, next) => { bus.$emit("start:spinner"); store .dispatch("FETCH_LIST", to.name) .then(() => { bus.$emit("end:spinner"); next(); }) .catch((err) => { console.log(err); }); }; 1-2. 해당 컴포넌트 위치에 변수넣어주기 const routes = [ { path: "/news", name: "news", component: () => import("@/views/NewsView"), beforeEnter: spinner, }, ] 방법 2. 2. 해당 컴포넌트에 바로 넣어주기 cons..

1.src 폴더 - utils폴더 - bus.js 생성 - bus.js 간단한 생성 import Vue from "vue"; export default new Vue(); - 보낼 파일내 ex) mixins.js .then(() => { console.log("fetchlset"); bus.$emit("end:spinner"); }) -받을 파일내 ex) App.vue .... .... created() { bus.$on("start:spinner", this.startSpinner); bus.$on("end:spinner", this.endSpinner); }, methods: { startSpinner() { this.loadingStatus = true; }, endSpinner() { this.l..

#HOC vs Mixins 하이 오더 컴포넌트는 리액트 진영의 함수형 프로그래밍에서 기반한 컴포넌트 개발 패턴입니다. 컴포넌트의 코드를 재사용하기 위한 방법이기도 하지만 캡슐화(encapsulation)과 컴포넌트 추상화를 구현하는 방법이기도 한데요. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대한 끌어올리겠다는 전략이기도 합니다. 예를 한번 들어볼게요. #HOC를 이용한 접근 방식의 예 일반적으로 HOC를 이용하여 컴포넌트를 구현하게 되면 다음과 같이 컴포넌트 관계에서 층이 하나 더 생깁니다. 일반 : 상위 - 하위 HOC : 상위 - HOC - 하위 위와 같이 HOC를 이용하여 컴포넌트를 개발해 나가는 경우 상위와 하위의 컴포넌트 로직은 변경하지 않은 채 기능을 확장해 나갈 수 있습니다. 가장 간단..

참고. router.vuejs.org/guide/advanced/transitions.html#per-route-transition Transitions | Vue Router Transitions Since the is essentially a dynamic component, we can apply transition effects to it the same way using the component: All transition APIs work the same here. Per-Route Transition The above usage will apply the same transition for all routes. If router.vuejs.org 방법1. 이렇게 를 으로 감싼후 아래 링크 참..

Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다. #웹팩 데브 서버의 특징 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있습니다. 먼저 명령어를 보겠습니다. "scripts":{ "dev": "webpack serve", "build": "webpack" } 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파..

https://ordinary-code.tistory.com/9 [Vue.js] 현업에서 잘 사용하는 Vue 무료 라이브러리 추천 현업 개발자가 소개하는 vue.js 유용한 라이브러리 필자는 현재 Vue.js를 주 언어로 사용하는 프런트 앤드 개발자이다. 오늘은 현업 시 유용하게 사용하고 있는 Vue.js 라이브러리 들을 소개해보려고 ordinary-code.tistory.com 1. textarea 본문 길이 제한 유효성 검사하기 bangj.tistory.com/35?category=926820 textarea 본문 길이 제한 유효성 검사하기 작성 글자가 길어요 작성 computed: { isContentsValid() { return this.contents.length vue 이메일 체크 정규 표현..

-방법1. 라이브러리 설치 vue-fontawesome 공식 사이트 참조 1. Install npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/vue-fontawesome npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons 2. "main.js" 파일에 추가 import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '..