[Vue + typescript] 프로젝트 생성

VUE.JS 목록

vue cli 설치

## npm 으로 설치
$ npm install -g @vue/cli
$ vue --version
@vue/cli 5.0.1

## 특정버전으로 설치
$ npm install -g @vue/cli@5.0.1
$ vue --version
@vue/cli 5.0.1

 

 

현재 저의 vue-cli 버전은 5.0.1 입니다.

$ vue --version
@vue/cli 5.0.1

 

프로젝트 생성

$ vue create first-project
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features     

키보드 방향키로 Manually select features를 선택하고 Enter 키를 누릅니다.

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) Choose Vue version
 ( ) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing      

키보드 방향키와 스페이스바로 위와같이 설정하고 Enter키를 누릅니다.

 

? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  > TSLint (deprecated) 

Use class-style : Yes

Use Babel alongside Typescript : No

Use History mode : Yes

linter fomatter는 TSLint를 선택합니다.

? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
  In package.json        

 

전체 세팅은 아래와 같습니다.

? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

 

프로젝트가 생성되었으면 VSCode로 프로젝트를 엽니다.

$ code .

VUE.JS 목록