vue.js/기술23 [vue] vue build 후 빌드파일 실행하기 npm run build @vue/cli 에서 위 명령어로 뷰 프로젝트를 빌드하면 아래와 같은 폴더가 나온다 (dist) 이 인덱스 파일을 바로 실행하면? 빈 화면의 html 호출됨 이유는 정확히 모르지만 로컬환경, 서버환경에서의 패스설정이 다르다 함 위 문제의 해결법은 - iis앱 사용 (찍먹해봤으나 실패) - 간단하게 웹서버에 올림 ex) 무료호스팅 업체 사용 - 패스설정을 건들기 (어려워보임) 닷홈을 이용하기로 함 어찌저찌 닷홈에서 무료호스팅을 받고, winscp나 filezila같은 앱을 이용하여 무료로 받은 웹서버의 주소에 들어가 /html 경로에 아래와 같이 빌드된 파일들을 넣어주면 끝 완료 2022. 11. 16. [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] plugin 제작/실행 본 포스팅은 vue3를 기준으로 작성하였습니다. vue에서 전역함수를 사용하기 위한 방법 중 하나로 plugin이 있다. 짧게 사용법을 정리 먼저 플로그인 파일을 작성한다. //plugin/add.js export default { install: (app) => { // inject a globally available $translate() method app.config.globalProperties.$add = (key,key2) => { // retrieve a nested property in `options` // using `key` as the path return key+key2 } } } 나는 $add라는 함수를 작성하였고 인자를 두 가지 받아 더해 반환하는 간단한 함수이다. 이 플러.. 2022. 5. 3. [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. 이전 1 2 3 4 다음
