[vue + TypeScript + Webpack] Hello World 01

Vue + Typescript  빌드 + Webpack 번들링 ! 

nodeJs가 설치 된 환경에서 진행 해야한다.

 

Spring Framework 기반에 웹 프로젝트와 Vue, React를 혼용해야하는 프로젝트를 진행하면서 작성 중이다. 따라서 다른 프레임웍에선 각자의 방법으로 처리하고 이 글에선 Vue와 React 같은 프론트단 프레임웍을 Webpack으로 번들링해서 화면단에 뿌려보는 것이 목표이다.

 

---

 

1. 프로젝트 생성 및 NPM 설치

 

프로젝트 디렉토리 생성

NPM 설치

mkdir forVueStarter
cd forVueStarter
npm init
npm i -D vue typescript webpack ts-loader css-loader vue-loader vue-template-compiler file-loader style-loader

 

 

프로젝트를 담을 디렉토리를 만들고 해당 디렉토리에 이동하여 NPM을 설치해준다. npm_module이 생기면 프로젝트 Root에 'dist' , 'src' 디렉토리를 만들어준다. 'dist'는 Webpack에서 번들링된 파일이 담길 예정이고, src는 우리가 작성할 vue 파일이 담길 예정이다.

 

 

 

 

2. 타입스크립트 config 작성

타입스크립트 Config 생성

tsc --init

 

우리는 디폴트 설정에서 만지지 말자, 몇가지 정리하자면,

{

    "target": "es5",  // 타입스크립트를 컴파일한 결과물의 자바스크립트 버전이다 . ES3가 디폴트이다.

}

 

 

 

 

... 다음시간에