방법: TailwindCSS + Vue3 + Vite를 사용하여 다크 모드 전환

저는 Vite/Vue3 초보자인데 현재 커뮤니티의 결합된 지식이 필요한 문제에 직면해 있습니다. Vite/Vue3 애플리케이션을 만들고 TailwindCSS를 설치했습니다: npmcreatevite@latestmy-vite-vue-app----templatevuecdmy-vite-vue-appnpminstall-Dtailwindcsspostcssautoprefixernpxtailwindcssinit-

P粉933003350 2023-11-01 12:05:00 0  1  811

Vue3/Vite: 모듈 외부화

Vue3 애플리케이션에서 암호화를 사용하여 문자열을 해시하려고 합니다. asyncfunctionhash(토큰){constdata=newTextEncoder().encode(token)constbyteHash=awaitcrypto.subtle.digest("SHA-256",data)//^thebelowerroristthownhereconstarr

P粉107991030 2023-08-26 13:45:43 0  1  813

vue3-carousel에서 메소드 호출: 어떻게 하나요?

vue를 처음 사용하는 경우, 문서에 따라 vue3-carousel에서 제공하는 API에 액세스하는 방법에 대한 간단한 질문이 생겼습니다. https://ismail9k.github.io/vue3-carousel/getting-started.html 아래 API 섹션, 라이브러리는 몇 가지 메소드를 제공합니다. 예를 들어 기본 첫 번째 항목 대신 두 번째 항목에서 캐러셀을 시작하기 위해 문서에서 제공하는 SlideTo(index:number) 메소드를 사용하고 싶습니다.

P粉450744515 2024-03-21 18:47:58 0  1  488

텍스트 필드에서 Vue3 + TypeScript v-model을 사용하는 방법은 무엇입니까? "오류: 잘못된 할당 대상"

전체 내용:[plugin:vite:vue]Transformfailedwith1error:/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73:ERROR:Invalidlocationtarget"/home/projects/vue3-vite- 타이프스크립트-스타터-jkcb

P粉343408929 2023-12-27 08:57:28 0  1  535

Compose API를 사용하는 독립형(단일 파일) Vue3 SPA의 메서드

저는 프로젝트 콘텐츠를 부트스트래핑한 다음 배포용으로 빌드하여 (아마추어) Vue3 애플리케이션(*)을 작성합니다. 좋은 결과. 브라우저에 직접 로드할 수 있는 독립형 단일 HTML 페이지를 만들어야 합니다. 나는 몇 년 전 Vue를 사용하기 시작했을 때(v1→v2 전환 중) 이 작업을 수행했고 즉시 올바른 문서를 찾았습니다. 유사한 Vue3 및 CompositionAPI를 찾을 수 없습니다. 반응 변수 {{hello}} 값을 표시하는 프레임 페이지는 무엇입니까(&l의 전체 빌드 애플리케이션 컨텍스트에 넣겠습니다)

P粉106711425 2024-03-26 23:28:38 0  1  429

"외부" 배열에 대한 Vue3 반응성

기존 애플리케이션을 Vue2에서 Vue3으로 포팅하는 동안 놀라운 문제가 발생했습니다. 변경 사항을 위해 Vue3 모니터 "외부" 배열을 만드는 방법은 무엇입니까? 이는 Vue2에서는 제대로 작동했지만 Vue3에서는 작동이 중지되었습니다. <ulid="list"><liv-for="tindataArray">{{t}}</li></ul><script>varnumbers

P粉681400307 2024-01-16 16:04:13 0  1  568

함수를 호출하기 위해 외부 Vue3 인스턴스에 액세스하는 방법은 무엇입니까?

인스턴스를 저장하는 변수의 이름을 모르는 경우 Vue3 인스턴스에 어떻게 액세스합니까? 특정 구성 요소에서 함수를 호출해야 합니다. 콘솔(Chrome 개발자 도구)에서 $0.__vue_app__을 입력하면 인스턴스의 데이터가 보이는데, JS 파일 내부의 코드에서는 어떻게 사용하나요? console.log($0) 은 물론 정의되지 않습니다. 여기까지 가려면 어느 길을 이용해야 하나요?

P粉141911244 2023-09-02 14:36:10 0  1  513

알 수 없는 변수를 동적으로 가져오기: Vue3-vue-router4의 ../views/Admin/Home.vue

Vue3-Vuerouter4-Vite를 사용하여 vuerouter에서 구성 요소와 경로를 가져오려고 하는데 다음 오류가 발생합니다(경로에 하위 항목이 있는 경로에만 해당). 내 라우터 코드: import{createRouter,createWebHistory} from "vue-router ";importpathsfrom" ./path";import{TokenService}from&quo

P粉376738875 2023-11-23 16:04:29 0  1  1031

Vue3: 상위 div의 클래스를 기반으로 하위 div를 조건부로 표시합니다.

저는 Vue를 처음 접했고 Vue3 캐러셀 플러그인에서 이 활동 클래스 예제를 작업 중입니다. carousel__slide--active 클래스의 텍스트 및 링크 div만 표시하고 싶었지만 이제 모든 carousel__items에 해당하는 텍스트와 링크가 표시됩니다. image.text 및 image.link를 표시하기 위해 활성화된 하위 클래스 carousel__slide에 대해 v-if 또는 v-bind를 수행할 수 있어야 할 것 같지만 둘 중 하나를 작동시킬 수는 없습니다. 어떤 제안이라도 대단히 감사하겠습니다.

P粉287345251 2024-02-25 15:34:06 0  1  440

Vue 3 + 모듈 연합: 모듈식 Vue 3 애플리케이션 구현

Vue3 및 ModuleFederation을 사용하여 간단한 마이크로 프런트엔드 예제를 구축하려고 하는데 충돌 문제가 발생했습니다. 여기에 코드가 있습니다: https://github.com/ghalex/mf-example 마이크로 프런트엔드가 두 개뿐입니다: 컨테이너(Vue3) 인증(Vue3) 내 문제는 App.vue 구성 요소://index를 가져올 때입니다. .js-importAppfrom'./comComponents/App.vue'//in 컨테이너

P粉448346289 2023-08-26 21:46:40 0  1  688

Pinia 스토어에 Firebase accessToken 저장 - Vue3

저는 Vue를 처음 접했고 Pinia를 처음 사용했습니다. 저는 이 가이드에 따라 Firebase, Pinia 및 Axios를 설정했습니다. 제가 만들고 있는 앱은 FirebaseUI를 사용하여 사용자가 이메일 링크를 통해 로그인할 수 있도록 합니다. 이 모든 작업은 아래 LoginPage 구성 요소에서 발생합니다. (잘못된 유형의 변수/함수는 무시하세요. 처음부터 작동하기를 바랍니다.) < scriptsetuplang=" ts">import{onMounted}fro

P粉966335669 2023-12-31 18:42:37 0  1  606

vue3-select2-Component, 첫 번째 문자로 필터링

필터링 옵션(설정의 "분류기"가 제대로 작동함)이 필요하지만 기호를 넣은 "입력"에서 modelValue를 가져올 수 없습니다. 입력한 첫 번째 기호를 어떻게 얻나요? @select 이벤트에만 작동하지만 이 작업에는 적합하지 않습니다.<Select2value="modelValue"@input="(e)=>modelValue=e.target.value":settings="sel

P粉921130067 2023-08-31 10:37:07 0  1  623

vue3 프로젝트에 대한 env.development 및 env.Production 설정

지침에 따라 Vue3용 vite 프로젝트를 만들었습니다. 내가 사용하는 방법은 env.development 또는 env.Production 파일을 생성하지 않으므로 문서를 읽을 내용이 거의 없습니다. 거기에 뭔가 필요한 것 같은데, 그런데 뭐요? 컴파일되었지만 라우터에서 실패함: import{createWebHistory,createRouter,RouteRecordRaw}from "vue-router";consthi

P粉327903045 2024-03-25 22:34:14 0  1  391

Vue3 - 페이지 새로 고침을 통해 상태 유지

저는 방금 Vue3을 사용하기 시작했고 vuex를 사용하여 상태를 관리하려고 했습니다. Vue2를 사용할 때 다음과 같이 앱이 로드될 때마다 스토어를 호출합니다. //mains.jsimportVueRouterfrom"vue-router";importVuexfrom"vuex";importrouterfrom"./routes";window.Vue=require('vue

P粉959676410 2024-03-25 23:22:06 0  1  557

Vue3 LocalStorage는 구성 요소가 렌더링된 후에 설정됩니다.

사용자 데이터를 로드하는 탐색 모음이 있는데, 이 모든 것은 사용자가 애플리케이션에 성공적으로 로그인한 후에 발생합니다. 문제는 navbar를 로드한 후 localStorage를 약간 설정해야 한다는 것입니다. setTimeout()으로 래핑하면 모든 것이 잘 작동하지만 변수는 사용자 활동에 따라 변경될 수 있으므로 본질적으로 반응적이어야 합니다. Toolbar.vue<템플릿><!--begin::Toolbarwrapper--><divc

P粉321584263 2024-03-25 23:56:35 0  1  451

Vue3 웹 구성요소 프로덕션 빌드 문제 해결

vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고 있는데 이제 vue3Web 구성 요소 지원이 아직 개발 중이라는 오류가 표시됩니다. --target 옵션을 제거하면 빌드 파일이 크게 달라집니다. 저는 .min 파일을 사용하고 있으며 이 옵션이 없으면 빌드되지 않습니다. 내 옵션은 무엇입니까? vite는 이전에 vue2에 대해 vue-cli가 제공한 것과 동일한 빌드 출력을 제공합니까?

P粉323374878 2024-04-06 12:43:37 0  1  801

Vue3 및 Storybook 7에서 슬롯을 처리하는 방법

ButtonAsSlot 스토리에서 하나의 구성 요소(UIButton)를 다른 구성 요소(UICard)의 슬롯으로 전달하려고 합니다. ButtonAsSlot 스토리에서는 default:''를 args.default로 전달하므로 슬롯에 전달됩니다. 기존 스토리(예: 기본값: '')를 전달할 수 있다면 좋을 것입니다. 그러나 이것은 작동하지 않습니다. 다음을 시도했지만 오류가 발생합니다. Storybook에 예기치 않은 식별자 '객체'가 있습니다. constdi

P粉504920992 2023-08-26 00:23:54 0  1  682

필터 기능에 사용되는 소품 표시 - axios, vue3

Axios를 사용하여 데이터를 가져올 때 FilteredProducts에 소품을 표시하는 방법. 아래와 같이 props를 전달했습니다. importdefault{data(){return{filteredProducts:[],};},mounted(){axios.get('/src/stores/sneakers.json').then(response=>{constproducts=response.data

P粉439804514 2023-09-08 10:56:43 0  2  599

블레이드 템플릿 내부에 Vue 삽입 소품

블레이드/라라벨에 Vue3 애플리케이션이 설치되어 있습니다. 블레이드 템플릿에는 슬롯을 삽입한 Vue3 구성 요소(zest-dropzone)가 있습니다. <template>...<slotname="hits":button-label="buttonLabel":files=" files":type= "티

P粉614840363 2024-03-27 09:15:52 0  1  473

vue3 js 구성 요소: 구성 요소가 업데이트되지 않았습니다.

API에서 데이터를 수집하는 구성 요소가 있습니다. API에서 반환된 데이터는 세부정보가 포함된 배열입니다. 배열의 값 중 하나는 렌더링해야 하는 구성 요소의 유형이며, 다른 모든 데이터는 구성 요소에 전달됩니다. 데이터베이스에서 가져온 값을 기반으로 올바른 구성요소를 렌더링하려고 하는데 안타깝게도 작동하지 않습니다. 저는 Vue를 처음 접했지만 vue2에서는 작동하지만 컴포지션 API를 사용하여 Vue3에서도 작동하길 원합니다. 교체하려는 구성 요소 코드는 다음과 같습니다. <comComponent:is="quest...

P粉779565855 2024-02-25 14:50:02 0  2  503