Fonctions de calcul séparées partagées par la compilation Vue dans des packages distincts

Question

Comment partager du code commun vue/nuxtspécifique entre différents packages ?

Je ne souhaite pas utiliser monorepo, mais j'ai du code partagé que je souhaite séparer dans son propre package. Ce code partagé (nouveau package) est écrit en utilisant @nuxtjs/composition-api, uniquement le calculé et /templates ;méthodes.

Je ne souhaite pas que ce package soit configuré en tant que plugin. Au lieu de cela, importez directement pour profiter du tremblement d'arbre (tout comme composition-api).

Je suis habitué à utiliser rollupjs pour créer des modules importables.

//Nouveau package
//index.js
exporter { par défaut comme isTrue } depuis './src/isTrue'
...

//src/estVrai
importer { calculé } depuis '@nuxtjs/composition-api'

exporter par défaut (p) =>
  return calculated(() => p === 'true') //Je ne sais pas si cela va détruire la réactivité ? ! ? !
}
Je n'ai eu aucun problème à le compiler aux formats .ssr, .esm, .min via rollupjs
Le problème se produit lorsque j'importe un nouveau package dans un fichier de travail. 
importer { isTrue } depuis 'new-package'

exporter par défaut{
nom : 'testComp',
configuration (accessoires) {
  retour {
    estActive : isTrue(props.active)
  }
}
 produira : 
[vue-composition-api] Vue.use(VueCompositionAPI) doit être appelée avant d'utiliser des fonctions. ≪/pré>
Je comprends que @nuxtjs/composition-api est un wrapper pour VueCompositionAPI. 
Je ne souhaite pas installer le nouveau package en tant que plugin, j'omet donc l'installation du nouveau package (exemple d'installation : https://github.com/wuruoyun/vue-component-lib-starter/blob /master/src/install .js)
            

Answer 1

Utilisé options API

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

Utilisez rollupjs pour compiler library.js et l'importer

//component.vue
import { isDisabled } from 'library'

export default {
  //Composition API:
  setup(props){
   return {
    //stuff
   }
  },
  //Options API:
  computed:{
    isDisabled,
  }
}