코딩라이브러리/Vue4 vue3 의 router 에서 경로지정하는 index.js 파일 예시 Vue 3에서 Vue Router를 사용하는 경우, index.js 파일은 라우터 설정을 정의하는 중요한 부분이다. index.js 파일에 경로(route) 설정 및 기타 관련 설정들을 구성할 수 있다.Vue 3에서는 Vue Router 4.x 버전을 사용하며, 이전 버전과 일부 차이가 있다. 기본적인 Vue Router 설정 (index.js)// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'const routes = [ { path: '/', name: 'Home'.. 2025. 1. 8. vue 에서 Module not found: Error: Can't resolve 'axios' in 에러 원인 vue 실행 시 Module not found: Error: Can't resolve 'axios' in... 오류가 발생하는 원인에 대해 알아본다.위 원인은 vue.js 프로젝트에서 axios 모듈을 찾을 수 없다는 의미로 볼 수 있다. 크게 3가지의 원인을 찾아볼 수 있다. 첫째, axios 가 설치되어 있지 않을 때axios 패키지가 프로젝트에 설치되지 않았을 때 발생할 수 있다.둘째, 잘못된 설치 경로일때axios 가 프로젝트의 올바른 경로에 설치되지 않았거나, 설치 경로와 현재 프로젝트의 의존성 관리가 일치하지 않은 경우셋째, 패키지 매니저 문제일 때npm 또는 yarn과 같은 패키지 매니저에서 설치 과정 중 문제가 발생했을 때.위 원인에 대한 해결방법은 아래와 같다. 첫째, axios 가 설치.. 2025. 1. 5. vuetify component의 input, button 사용할 때 길이 조정하기 vuetify input이나 button 컴포넌트를 사용할 때는 길이가 길게 나온다.이를 위해서는 vuetify 의 그리드 시스템과 레이아웃 유틸리티 클래스를 활용하여 레이아웃을 조정할 수 있다. 1. vuetify 의 그리드 시스템 사용하기 ( v-row, v-col )vuetify는 Flexbox 기반 그리드 시스템을 제공하므로, v-row, v-col을 사용해 레이아웃을 조정한다. 기본 사용 코드화면vuetify 그리드 시스템 사용하기 화면설명v-col 의 cols, sm, md 속성 사용 사용cols="12"모바일 크기에서 전체 너비를 사용sm="6"작은 화면에서는 50%md="4"더 큰 화면에서는 1/3.. 2024. 10. 16. Vue3 ref() 로 선언된 변수에 데이터 할당하기 Vue3 에서 변수 선언은 ref() 로 한다.여기서 ref() 는 Vue3 의 reactive 시스템중 하나로, 데이터를 할당하기 위해서는 value 를 통해 값을 할당하거나 변경한다. 이미 값이 주어진 변수를 ref() 로 설정된 변수에 대입하는 방법ref('') 로 변수 초기화.value 로 값 할당ref()로 선언된 변수를 갱신할 때는 .value를 통해 직접 값을 할당한다.템플릿에서 데이터를 확인하려면 {{ dataVal }} 또는 {{ dataVal.value }}로 렌더링할 수 있다. {{ dataVal }} {{ dataVal.value }} 2024. 10. 1. 이전 1 다음
