vue-katex 수학을 렌더링하지 않고 큰 블랙 박스를 표시하지 않습니다.

Question

방금 ​​vue-katex 모듈 https://www.npmjs.com/package/vue-katex을 사용하려고했습니다.

나는 VUE-CLI

$ vue init webpack-simple my-project 

사용하여 간단한 예를 설정 그리고 나는 vue-katex 패키지를 추가, 페이지에 일부 KaTeX 수학 물건을 넣어 몇 줄의 코드를 추가하고 내 dev에 서버를 시작했다. 그러나 수학 표기법이 제대로 표시되지 않고 있으며 내 페이지에 큰 블랙 박스가 표시됩니다.

<template> 
    <div id="app"> 
    <div v-katex:display="'\\frac{a_i}{1+x}'"></div> 
    <img src="./assets/logo.png"> 
    ... 
    </div> 
</template> 

<script> 
import Vue from 'vue'; 
import VueKatex from 'vue-katex'; 

Vue.use(VueKatex); 

export default { 
    name: 'app', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    } 
} 
</script> 

:

"dependencies": { 
    "vue": "^2.5.11", 
    "vue-katex": "^0.1.2" 
}, 
"browserslist": [ 
    "> 1%", 
    "last 2 versions", 
    "not ie <= 8" 
], 
"devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-stage-3": "^6.24.1", 
    "cross-env": "^5.0.5", 
    "css-loader": "^0.28.7", 
    "file-loader": "^1.1.4", 
    "vue-loader": "^13.0.5", 
    "vue-template-compiler": "^2.4.4", 
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.9.1" 
} 

여기 (I 위의 VUE-katex의 NPM 페이지에서 직접 코드를 찍어 보았습니다 한) 내 응용 프로그램 코드입니다 :

여기 내 package.json의 관련 부분

그리고 결과의 스크린 샷 :

수학이 렌더링되지 않는 것을 볼 수 있습니다.이 괴괴 망측 한 큰 블랙 박스를 얻을 수 있습니다. dev 도구 검사를 포함하여 진단하기 쉽도록했습니다.

나는 모든 것을 가능한 한 간단하게 유지하려고 노력했습니다. 누군가 내가 잘못하고있는 것을 말해 줄 수 있다면 정말 고맙습니다. 사전에

많은 감사,

Answer 1

한 단계는 VUE-katex 워드 프로세서에서 누락되었습니다. 상위 프로젝트로 이동하면 https://github.com/Khan/KaTeX을 통해 도보로 건너간 끝에 외부 CSS 파일에 대한 링크가 포함됩니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">