Programming language/vuejs
vue 정리 part1 - vue 설정.
hello-world
2022. 5. 2. 15:03
728x90
반응형
요새 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
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 설치 ~ 끝.
728x90
반응형