[Vue + typescript] 프로젝트 생성

이전 포스팅과 이어집니다.
Vue 설정을 위한 node 및 vue-cli 설치가 필요합니다.

@vue/cli 5.0.1 => vue-cli version

$ vue --version
@vue/cli 5.0.1

---

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

• 방향키로 원하는 버전을 선택하여 Enter
  • 본 포스팅은 Manually select features을 선택

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? (Y/n) y

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (y/N) n

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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) (Y/n) y

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

 

$ Vue CLI v5.0.1
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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: Standard
? 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? (y/N) n

---

2. 프로젝트 실행

## 프로젝트 경로 이동
$ cd project
 
 
 
 
## vscode로 프로젝트 실행
$ code .
 
 
 
 
## local 서버 구동
$ npm run serve
 DONE  Compiled successfully in 8889ms
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.250.97.207:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.

---