suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Separate Berechnungsfunktionen, die von der Vue-Kompilierung in separate Pakete gemeinsam genutzt werden

<p>Wie kann man gemeinsamen <code>vue/nuxt</code>spezifischen Code zwischen verschiedenen Paketen teilen? </p> <p>Ich möchte <code>monorepo</code> nicht verwenden, aber ich habe gemeinsam genutzten Code, den ich in ein eigenes Paket aufteilen möchte. Dieser gemeinsam genutzte Code (neues Paket) wird mit <code>@nuxtjs/composition-api</code> geschrieben, nur der gemeinsam genutzte <code>berechnete</code> wird in verschiedenen Komponenten immer wieder verwendet /templates ;Methoden</code>. </p> <p>Ich möchte nicht, dass dieses Paket als Plugin eingerichtet wird. Importieren Sie stattdessen direkt, um das Tree-Shaking zu nutzen (genau wie bei <code>composition-api</code>). </p> <p>Ich bin mit der Verwendung von <code>rollupjs</code> vertraut, um importierbare Module zu erstellen. </p> <pre class="brush:php;toolbar:false;">//Neues Paket //index.js Exportieren Sie {Standard als isTrue} aus './src/isTrue' ... //src/isTrue import { berechnet } aus '@nuxtjs/composition-api' Exportstandard (p) => return berechnet(() => p === 'true') //Ich bin mir nicht sicher, ob dies die Reaktionsfähigkeit zerstören wird? ! ? ! }</pre> <p>Ich hatte keine Probleme beim Kompilieren in die Formate <code>.ssr, .esm, .min</code> über <code>rollupjs</code></p> <p>Das Problem tritt auf, wenn ich ein neues Paket in eine Arbeitsdatei importiere. </p> <pre class="brush:php;toolbar:false;">import { isTrue } from 'new-package' Standard exportieren{ Name: 'testComp', setup(props){ zurückkehren { isActive: isTrue(props.active) } }</pre> <p> erzeugt: </p> <pre class="brush:php;toolbar:false;">[vue-composition-api] Vue.use(VueCompositionAPI) muss vor der Verwendung von Funktionen aufgerufen werden. </pre> <p>Ich verstehe, dass <code>@nuxtjs/composition-api</code> ein Wrapper für VueCompositionAPI ist. </p> <p>Ich möchte das neue Paket nicht als Plugin installieren, daher lasse ich die Installation des neuen Pakets aus (Installationsbeispiel: https://github.com/wuruoyun/vue-component-lib-starter/blob /master/src/install .js)</p>
P粉421119778P粉421119778528 Tage vor729

Antworte allen(1)Ich werde antworten

  • P粉242535777

    P粉2425357772023-09-02 00:26:17

    使用了 options API

    //library.js
    export default function(){ // 访问 this -> 箭头函数没有 this
       return this.disabled == true // 当使用 options api 时,这将是 vue 上下文,即属性 disabled
    }

    使用 rollupjs 编译 library.js,并可以导入

    //component.vue
    import { isDisabled } from 'library'
    
    export default {
      //Composition API:
      setup(props){
       return {
        //stuff
       }
      },
      //Options API:
      computed:{
        isDisabled,
      }
    }

    Antwort
    0
  • StornierenAntwort