본문 바로가기

Programming/Vue

(4)

[vue3] pnpm으로 프로젝트 생성하기 (ft. @tsconfig/node18/tsconfig.json 오류) pnpm으로 vue 프로젝트 생성하기 vue3 프로젝트의 패키지 관리자를 pnpm으로 선택하고 프로젝트를 새로 생성해본다. 🛠 프로젝트 생성 $ pnpm create vue 위와 같이 프로젝트 생성 명령어를 사용한다. pnpm create vue@latest 와 동일하게 최신버젼의 vue를 사용한다. 만약, 특정 버젼의. vue를 사용하려면 "pnpm create vue@원하는버젼" 으로 명령어를 수정해준다. 🛠 옵션 선택하기 ✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia..

[vue3] pnpm 설치 (ft. errno -13 오류) pnpm 설치하기 vue 프로젝트의 패키지 관리를 npm -> pnpm으로 변경하고자 한다. pnpm은 npm보다 여러 방면에서 향상된 기능을 제공한다고 한다.(용량, 캐시 용량 절약 등) 회사의 신규 프로젝트도 패지키 관리를 pnpm을 사용하고 있고 개인 프로젝트도 pnpm을 사용하는 것이 여러방면으로 도움이 될 듯 하다. 🛠 설치 준비물 pnpm을 설치하기 위해서는 Node.js의 버젼이 18.0 이상이여 한다고 한다. $ node --version 터미널에서 위 명령어를 쳐서 노드 버젼을 확인하자.($는 명령어를 의미하니 $는 빼고 타이핑 해줘야한다.) 결과값이 v18.0.0 이상이라면 설치 가능할 것이다. 🛠 설치 하기 $ npm install -g pnpm 터미널에서 pmpm을 설치하는 명령어를..

[Vue3] TypeError: Cannot read properties of undefined (reading '$store') 해결 Vue3 TypeError: Cannot read properties of undefined (reading '$store') 해결하기 Vuex의 store 사용할 때 자주 볼 수 있는 오류 입니다. vue2와 vue3의 store의 사용법이 달라서 일어날 수 있는 오류 입니다. 1. main.js 확인 vue2에서 vue3를 오면서 main.js에 store를 사용하고하는 명시법이 바뀌었기에 많이 나는 오류 입니다. 해결법 import { createApp } from 'vue' import App from './App.vue' import { store } from './store/store' createApp(App) .use(store) .mount('#app') main.js store.js를 ..

[Vue .js] Composition API : props, emits 사용법 composition API porps, emits 사용법 Vue3에 추가된 composition API는 Vue2에서의 option API보다 콤포넌트를 조금 더 독립적으로 만들기 유리하다. 관심사의 분리(상위 컴포넌트는 데이터 컨테이너 역할로 데이터를 직접 조작, 하위 컴포넌트는 데이터를 조작하지 않고 표현만을 담당)를 통해 컴포넌트의 재사용률을 높일 수 있다. props와 emits 사용법 예시 아래예시는 App.vue 안에서 TodoList.vue 컴포넌트를 사용하는 것이다. App.vue 상위 컴포넌트인 App.vue에서 하위 컴포넌트에게 datadls props를 내려주고 하위 컴포넌트에게 이벤트인 emits을 받는다. 하위컴포넌트(TodoList.vue)의 todoItemsProps란 이름의..

이전 1 다음

728x90

티스토리툴바