layout: post title: 타입스크립트와 함께 Vue3 시작하기 categories: [dev] tags:
nodejs를 사용하면서 불편했던 것은 타입을 명확히 알 수 없기 때문이었다. 그렇기에 타입스크립트를 사용하게 됬다. 서버쪽 구성(express 등) 타입스크립트를 지원했으나 Vue2의 경우에는 불완전한 타입스크립트로 인해 문제도 몇몇 있었다. 그러나 이번에 출시한 Vue3는 타입스크립트가 공식적으로 지원된다. tpyescript로 Vue3가 작성됬기 때문이다. 개인적인 생각으론 React보다 유연하고 타입스크립트 지원이 되서 편리할 것 같다.
Vue 기본 프로젝트를 만들고 리뷰하도록 하자
Vue CLI가 있기에 기본 환경 구성은 매우 심플하다.
npm install -g @vue/cli
vue create vue-with-typescript
바벨, 타입스크립트, 린트 옵션을 선택했다.
# 옵션 선택
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files