vue 정리 part1 - vue 설정.

요새 vue3 가 꽤 사용되고 있는 거 같다.

하지만 아직까지 vue3 를 쓰기엔 팀원 간에 서로가 정리가 안된 듯 하고 프로젝트를 빠른시간내에 마무리

짓기엔 무리가 있다 판단하여 그냥 vue2.x + ts + scss 로 진행하기로 했다.

 

우선 웹퍼블리싱과 협업을 위해 ts 와 html 을 분리해서 작업할 필요가 있다.

그래서 src 폴더 이외에도 markup 이란 폴더를 별도로 두어 작업 산출물 방향을 달리했다.

a. ts 와 html 을 분리하기 위해 vue-template-loader 를 설치했다.

( vue or ts / html 파일을 분리해서 사용할 수 있게 돕는다 )

아래 url 에서 상세한 내용을 살펴 볼 수 있다.

https://www.npmjs.com/package/vue-template-loader

vue-template-loader

npm install --save-dev vue-template-loader

b. vue.config.js 에 아래 코드 추가 ( configureWebpack 의 내용 추가 )

//vue.config.js
module.exports={
    configureWebpack:{
         module:{
         rules:[
                {
                    test:/.html$/,
                    loader:"vue-template-loader",
                    exclude:/index.html/
                },
             ]
         }
    }
}

c. src 폴더에 `shims-html.d.ts` 파일 추가 그리고 아래 코드 입력

declare module '*.html'{
import Vue,{ ComponentOptions, FunctionalComponentOptions} from 'vue';
interface WithRender{
 <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U, ): U;
 <V extends typeof Vue>(component: V): V;
}
const withRender: WithRender;
export default withRender;
}

 d. 실행 예시

import WithRender from './App.html';
@WithRender
@Component
export default class App extends Vue { }

 

여기까지 vue-template-loader 설치 ~  끝.