Vue3, TypeScript를 공부하고자 작은 개인 프로젝트를 만들어 나가면서 여기에 기록을 정리하고자 합니다. 환경구성은 Vue3, TypeScript, Vite, Pinia를 사용하여 플젝을 만들고 다 구현이 되면 github에 action을 통해서 자동 배포되도록 할 예정입니다. 끝으로 electron을 통해서 데스크톱 앱으로 만들예정입니다.
이 글에서는 프로젝트의 환경을 구성하는 부분부터 시작하겠습니다.
프로젝트 만들기
npm init vite 프로젝트이름 –template vue-ts
명령어로 Vue3, Typescript, vite가 적용된 템플릿으로 프로젝트를 만들수 있습니다.
여기서는로 프로젝트를 만들었습니다.
vue의 컴포넌트 정보를 타입스크립트가 인지 하지 못하고 있어서 오류가 보이고 있습니다
shims-vue.d.ts
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
위의 파일을 추가하면 타입스크립가 vue 파일을 인식할 수 있습니다.
package.json에 있는 dependencies이 아직 설치가 안되어있네요. npm i로 설치 해 줍시다
node_modules라는 폴더에 dependencies에 있던 라이브러리들이 설치가 되고 프로젝트의 모든 오류 들이 사라졌습니다.
사실 이정도 구성만 하면 만들고자 하는 가위 바위 보 게임을 만드는 데는 충분합니다. 하지만 일반적인 프로젝트에서는 router, store(pinia), axios와 같은 기능들이 필요로 합니다. 그래서 간단하게 세팅하는 방법들을 다음글에서 정리하고자 합니다.
소스