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)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisé
options API//library.js export default function(){ // 访问 this -> 箭头函数没有 this return this.disabled == true // 当使用 options api 时，这将是 vue 上下文，即属性 disabled }Utilisez
rollupjspour compiler library.js et l'importer//component.vue import { isDisabled } from 'library' export default { //Composition API: setup(props){ return { //stuff } }, //Options API: computed:{ isDisabled, } }