2

我只是想在我的应用程序中使用这个包（vue-prism-editor）vuejs 3，但我总是遇到前面的错误。

TS7016: Could not find a declaration file for module 'prismjs/components/prism-core'. 'C:/Sibeesh/GitHub/vue-resume/node_modules/prismjs/components/prism-core.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/prismjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'prismjs/components/prism-core';`

我确实安装了@types/prismjs，但那里没有运气。我按照自述文件中提到的步骤进行了完全相同的尝试。

下面是我的package.json文件。

{
  "name": "vue-resume",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jsoneditor": "^9.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-prism-editor": "^2.0.0-alpha.2",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/prismjs": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "prismjs": "^1.23.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

这是我的vue组件。

<template>
  <div class="hello">
    <prism-editor
      class="code-editor"
      v-model="code"
      :highlight="highlighter"
      line-numbers
    ></prism-editor>
  </div>
</template>

<script lang="ts">
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor';
  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)
  import { highlight, languages } from 'prismjs/components/prism-core';
  import 'prismjs/components/prism-javascript';

  export default {
    components: {
      PrismEditor,
    },
    data: () => ({ code: 'console.log("Hello World")' }),
    methods: {
      highlighter(code: string) {
        return highlight(code, languages.js); // languages.<insert language> to return html with markup
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

/* required class */
  .code-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }

</style>

你曾经能够在vue 3应用程序中使用这个插件吗？

4

2 回答 2

3

我用打字稿尝试了一些方法，发现这是最简单的方法

  1. 第一的
yarn add @types/prismjs
  1. 然后
import { highlight, languages, highlightElement } from 'prismjs';
于 2021-05-17T12:48:51.700 回答
1

在这个问题上花了一些时间之后，我可以找出我在做什么错误。你注意到lang="ts"我的script? 嗯，这就是这个问题的根本原因。从中删除后<script>，错误消失了。GitHub 中的这个问题帮助我找到了解决方案。这种方法的一个缺点是我们不再能够使用 ，Type annotations因为这将仅受TypeScript文件支持。

在此处输入图像描述

另一个错误是我没有包括对import 'prismjs/components/prism-clike';. 如果我们不包含该文件，我们将收到上述错误。

Uncaught TypeError: Cannot read property 'class-name' of undefined
    at eval (prism-javascript.js?416b:3)

另一种方法：

如错误中所述，您还可以创建一个.d.ts文件并添加declare module 'prismjs/components/prism-core'. 我在我的组件目录中创建了这个文件。

然后你可以按照前面的方式重写你的脚本。

<script lang="ts">
import { PrismEditor } from "vue-prism-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "vue-prism-editor/dist/prismeditor.min.css";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-json";
import "prismjs/themes/prism-tomorrow.css";
import sampleData from "../assets/resume-template.json";
import { Options, Vue } from "vue-class-component";

@Options({
  components: {
    PrismEditor,
  },
  data: () => ({
    code: JSON.stringify(sampleData),
  }),
  methods: {
    submit() {
      console.log(this.code);
    },
    highlighter(code: string) {
      return highlight(code, languages.json);
    },
  },
})
export default class CodeEditor extends Vue {}
</script>

只是分享，因为它可能对其他人有帮助。

于 2021-03-20T21:40:50.180 回答