Bagaimana untuk menggunakan pemalam vue-codemirror dalam vue3

Gunakan

1. Pemasangan baris perintah

npm install vue-codemirror --save
// cnpm install vue-codemirror --save

Jika anda menjalankan contoh tapak web rasmi, ralat akan dilaporkan:

@codemirror/lang- javascript
@codemirror/theme-one-dark

Anda boleh memasang fail yang sepadan dalam terminal untuk menyelesaikan masalah

npm i  @codemirror/lang-javascript
npm i  @codemirror/theme-one-dark

2

<template>
  <codemirror
    v-model="code"
    placeholder="Code gose here..."
    :
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="2"
    :extensions="extensions"
    @ready="log(&#39;ready&#39;, $event)"
    @change="log(&#39;change&#39;, $event)"
    @focus="log(&#39;focus&#39;, $event)"
    @blur="log(&#39;blur&#39;, $event)"
  />
</template>

<script>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

import { ref } from "vue";
export default {
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`console.log(&#39;Hello, world!&#39;)`);
    const extensions = [javascript(), oneDark];

    return {
      code,
      extensions,
      log: console.log,
    };
  },
};
</script>

dalam komponen yang diperlukan

Arahan konfigurasi:

Tunjuk cara kawasan penyuntingan kod peribadi

Kawasan penyuntingan kod

Sokongan kawasan penyuntingan kod, siang/malam yang memuaskan Pertukaran tema memenuhi kekurangan penukaran bahasa c++/python

, tetapi tidak memenuhi gesaan kod

kod komponen vue3

rreee

Atas ialah kandungan terperinci Bagaimana untuk menggunakan pemalam vue-codemirror dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!