vue18 [vue] npm run serve 입력 시 npm run serve 입력 시 localhost:8080, 즉 내 호스트에 뷰 프로젝트를 띄워준다. 이건 어디서 띄워주는 건지 궁금해서 알아봄 vue project 생성시 자동으로 package.json이 생성된다. 위 사진이 package.json의 일부이며 scripts에 npm명령어들이 설정되어있다. npm run **** 로 해당 명령어들을 실행하면 됨 나는 지금까지 npm run serve로 뷰 프로젝트들을 실행해왔는데 귀찮다면 npm run s 이렇게 바꿔서 실행도 가능 이 포스트는 어떻게 내호스트에 뷰 프로젝트를 띄워주는가가 목적이니 이만하고, 본문으로 돌아갔다. 처음엔 이렇게 생각했다 npm run serve를 입력하면 npm run vue-cli-service serve를 입력한 것과.. 2022. 7. 17. [vue] vuetify 실행해보기 1. vue 프로젝트에 vuetify 추가하기 # npm i vuetify # 아래의 공식홈페이지 주소에 나오는대로 main.js에 소스 작성하기 // Vuetify import "vuetify/styles"; import { createVuetify } from "vuetify"; import * as components from "vuetify/components"; import * as directives from "vuetify/directives"; const vuetify = createVuetify({ components, directives, }); createApp(App).use(vuetify).mount("#app"); https://vuetifyjs.com/en/getting-sta.. 2022. 7. 1. [vue] 비동기 컴퍼넌트 lazy loading | _defineAsyncComponent() LAZY LOADING spa의 단점 중 하나는 처음 웹에 진입 시 번들해놓은 모든 리소스를 한번에 받아 초기 진입속도가 느리다는 점이다. 개발자도구 - network 탭을 보면 chunk-vendors란 메뉴가 있는데, 이 chunk-vendors가 맨 처음 리소스를 받는 것이고, lazy loading는 이 chunk-vendors의 용량을 컴퍼넌트 단위로 나누어 다른 화면에서 리소스를 받도록합니다. component: () => import(/*webpackChunkName: "about" */ '../views/About.vue') 위 코드처럼 작성할 시 별도의 chunk 파일을 생성하여 실제 이 라우트를 방문했을 때 리소스를 로드하게 됨 다만 lazy loading를 남발할 시 spa.. 2022. 4. 14. [vue] 클래스 바인딩하는 여러 방법 공식문서에서 클래스 바인딩하는 여러 방법이 있어 정리하기 위한 포스트 https://vuejs.org/guide/essentials/class-and-style.html Class and Style Bindings | Vue.js vuejs.org 1. 스타일을 data에 string으로 미리 선언 후 사용 이후 activeClass의 값을 바꿔 동적으로 클래스를 바꿀 수 있다. 2. boolean 데이터를 이용해 클래스를 동적으로 부여 ㄻㅇㄴ로ㅓㅁㅇㄴ론ㅇㅁ롬러ㅏ 별건 없음. isActive의 값이 ture이니 {active: isActive}문이 일차적으로 선택이되고, isActive가 true이니 active 클래스가 주어진다. 2022. 4. 12. 차세대 빌드 도구 vite (vue) Webpack의 번들링과정이 길어 짜증날때 사용할 수 있는 빌드도구 vite를 써봄 (react에도 사용 가능) 우리는 vue를 사용할때 기본적으로 Webpack을 이용하여 빌드를한다. vue create '프로젝트명' 위의 명령어로 vue project를 생성 시, node_modules폴더나 package-lock.json 에 웹팩관련 모듈,설정들이 작성되어있어 vue는 웹팩을 기본으로 사용하는구나 알 수 있다. 다만 프로젝트의 크기가 커지면 커질수록 빌드할 시에 시간이 너무 오래걸린다. 나같은 경우에는 프로젝트 생성만 10초쯤 걸리는듯. 이 대기시간이 짧은 빌드도구 vite가 있다해서 사용 해보기로 함 npm install -g vite npm init vite@latest 먼저 vite를 설치 후.. 2022. 4. 7. [vue] 이벤트 버블링 관련 수식어 공식문서에 이벤트 핸들링 중 버블링과 관련된 수식어 들이 보여 정리함. https://vuejs.org/guide/essentials/event-handling.html#event-modifiers Event Handling | Vue.js vuejs.org click.stop 위 코드를 실행할 시엔 문제가 한 가지 있다. 바로 click.stop을 우클릭하였을시 부모,자신,자식 총 세번의 abc함수가 호출이 됨 의도와 맞다면 문제가 없겠지만 의도와 다를시 이를 다룰 수 있어야됨 수식어를 정리하기전 이벤트 전파 현상에 대해 알아야하는데 이벤트 전파 현상이란 위의 예시처럼 클릭한 DOM(이벤트가 발생한 DOM)과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생하는 것을 이벤트 전파 현상이.. 2022. 3. 17. 이전 1 2 3 다음
