vue.js29 [vue] CSS variable injection vue3에서 css에 변수를 주입할수있는걸 보고 포스팅을 올림 원래 scss와 같은 style lang에서 변수를 사용할 수 있다고 알고있긴한데, css에 대해 깊게 알지 못해 vue에서 제공하는 아래 방법이 매우 신기했음 fs에 스타일 값을 두고 ("100px") style 구역에서 font-size:v-bind("fs") 2022. 12. 19. [vue] vue3 ref로 컴퍼넌트 접근하기 (define expose) 상황 나는 ref를 이용하여 부모 컴퍼넌트(A)에서 자식 컴퍼넌트(B)의 call함수를 호출하고 싶음 그런데 script setup 방식을 이용하고있을때 ref를 이용하여 자식컴퍼넌트에 접근하는 방법을 몰랐음 안 뒤에 정리한 내용임 1. 먼저 자식 컴퍼넌트에서 call함수를 아래와 같이defineExpose라는 vue 기본제공 메소드를 사용하여 명시함 (대충 이걸 배출할거다 라는 뜻) 2. 부모 컴퍼넌트는 자식 컴퍼넌트태그에 ref를 달아줌 ex) 3. 컴퍼넌트내부에서 스크립트 최상단 스코프에 ref를이용하여 컴퍼넌트 객체를 미리 빈값으로 할당함 ex) const b = ref(null); 주의점 - 변수명은 컴퍼넌트태그에 등록한 ref의 이름과 똑같아야 함 (위 예시에선 'b') - 컴퍼넌트내부의 스크.. 2022. 12. 19. [vue] vue build 후 빌드파일 실행하기 npm run build @vue/cli 에서 위 명령어로 뷰 프로젝트를 빌드하면 아래와 같은 폴더가 나온다 (dist) 이 인덱스 파일을 바로 실행하면? 빈 화면의 html 호출됨 이유는 정확히 모르지만 로컬환경, 서버환경에서의 패스설정이 다르다 함 위 문제의 해결법은 - iis앱 사용 (찍먹해봤으나 실패) - 간단하게 웹서버에 올림 ex) 무료호스팅 업체 사용 - 패스설정을 건들기 (어려워보임) 닷홈을 이용하기로 함 어찌저찌 닷홈에서 무료호스팅을 받고, winscp나 filezila같은 앱을 이용하여 무료로 받은 웹서버의 주소에 들어가 /html 경로에 아래와 같이 빌드된 파일들을 넣어주면 끝 완료 2022. 11. 16. [vue] vuesax ui-framework 며칠 전 vuetify를 실행해본적이 있음 https://yamyam-naengmyeon-donkats.tistory.com/86 [vue] vuetify 실행해보기 (vue2, vue3, vite) 기존에 사용하던 quasar 라는 ui프레임워크 대신 vuetify를 써보고 싶어서 세팅해봄 1. vue2버전으로 프로젝트를 만들어 vuetify를 적용 (default) vue add vuetify 위 명령어입력 후, Default를 선택하여 vuetify.. yamyam-naengmyeon-donkats.tistory.com 그런데 기존에 쓰고 있던 quasar랑 ui느낌이 비슷했고, 그 부분이 마음에 안들어서 다른 ui framework를 찾아봄 - vuesax https://lusaxweb.githu.. 2022. 7. 30. [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. 이전 1 2 3 4 5 다음
