[게시판] vue-markdown-loader 추가

npm i --save-dev vue-markdown-loader

vue-markdown-loader 의존성 추가.

// webpack.config.js
 
 
module.exports = {
    //...
    module: {
        rules: [
          // .md 로더 추가.
           {
            test: /\.md$/,
            use: [
              {
                loader: 'vue-loader'
              },
              {
                loader: 'vue-markdown-loader/lib/markdown-compiler',
                options: {
                      raw: true
                }
              }
          }
        ]
      },
      resolve: {
        extensions: ['.ts', '.js', '.vue', '.json', '.md'], // .md 추가

공식 깃헙에서 알려주는대로 웹팩 설정 추가한다.

vue-loader 버전을 15이상을 쓰고 있어서 위와 같이 추가함. (버전에 따라 약간씩 다르다.)

// src/posts/test.md   # Test    # H1 ## H2 ### H3   **bold**

cs

테스트용 마크다운 파일을 하나 만든다.

// src/components/List.vue
 
<template>
<div>
    List
    <Test/> // 추가
</div>
</template>
 
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
// @ts-ignore
import Test from "../posts/test.md" //
 
@Component({ 
    components: {Test} // 추가
})
export default class List extends Vue {
    
}
</script> 

List.vue에서 마크다운 컴포넌트를 임포트 시켜서 사용한다.

@ts-ignore은 typescript 컴파일 옵션이랑 뭔가 안 맞는것 같은데 아직 해결방법을 못찾았다.

ts 파일에서 .vue 못 찾는거랑 비슷한거 같은데 좀 더 찾아봐야 할 듯.

// tsconfig.json
{
    "compilerOptions": {
        // ...
        "baseUrl": "src",
        "paths": {
            "@posts/*": [
                "posts/*"
            ]
        }

md 파일 posts 폴더에 모두 모아놔서 상대 경로말고 @posts 같은걸로 paths 정의해서 사용하려고 했는데 실패했다. (참고)

다음에 다시 도전해봐야겠다.

alias 먹히면 posts 폴더 src 폴더 밖으로 빼야지.

실행결과.

마크다운을 화면에 그대로 뿌리는건 되는데 이걸 리스트 형식으로 가져오는건 아직 어케해야 하는지 감이 안잡힌다.

지킬처럼 파일이름이랑 등록일만 리스트로 뿌려도 괜찮은데 더 찾아봐야 할 듯.

---

깃허브 : add vue-markdown-loader