[게시판] List 컴포넌트 생성

List 컴포넌트 추가.

// src/components/List.vue
 
<template>
<div>
    List
</div>
</template>
 
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
 
@Component
export default class List extends Vue {
}
</script>

List 컴포넌트를 .vue 파일로 SFC(Single File Component)로 만들었다.

기존 ts-vue에는 .ts와 .html 파일로 나눠서 만들었지만 파일하나가 관리가 쉬워서 걍 이렇게 하려고 한다.

// src/index.ts
 
// ...
 
// @ts-ignore
import List from './components/List.vue'; // add
 
let v = new Vue({
    el: "#app",
    template: `
    <div>
    <List/>
    </div>`,
    components: {
        List // add
    },
    store
});

index.ts에서 만든 single file component인 List.vue를 임포트해서 추가했다.

그리고 npm run dev를 해보면

ERROR in ./src/components/List.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/List.vue)
Module not found: Error: Can't resolve
'./Test1.html' in 'C:\Users\user\Desktop\GITHUB\homepage\src\components'
 @ ./src/components/List.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/List.vue) 28:22-45
 @ ./src/components/List.vue
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.ts

vue-loader 관련 에러가 난다. 찾아보니까 ts-loader 버전 문제인 듯.

ts-loader 버전을 14.2.2 에서 15.2.4로 업그레이드.

// webpack.config.js
 
const {VueLoaderPlugin} = require('vue-loader') // add
 
module.exports = {
    //...
    plugins: [
        // ...
        new VueLoaderPlugin() // add
      ]
}

webpack config 설정에 VueLoaderPlugin을 추가했다.

참고 : [stack overflow]TypeScript Cannot detect *.vue files

ts-vue 깃헙 프로젝트도 추가로 수정이 필요할 듯 허다..

실행결과

---

깃허브 : add List Component(SFC)