如何在不同的包之间共享通用的vue/nuxt特定代码?
我不想使用monorepo,但我有一些共享的代码,我想将其分离成自己的包。这个共享的代码(新包)使用@nuxtjs/composition-api编写,只是在不同的组件/模板中反复使用的共享computed和methods。
我不希望将这个包设置为插件。而是直接导入以利用树摇动(就像composition-api一样)。
我熟悉使用rollupjs创建可导入的模块。
//新包
//index.js
export { default as isTrue } from './src/isTrue'
...
//src/isTrue
import { computed } from '@nuxtjs/composition-api'
export default (p) => {
return computed(() => p === 'true') //我不确定这样会不会破坏响应性?!?!
}
我没有遇到任何问题将其编译为.ssr, .esm, .min格式,通过rollupjs
问题出现在我将新包导入到一个工作文件中时。
import { isTrue } from 'new-package'
export default{
name: 'testComp',
setup(props){
return {
isActive: isTrue(props.active)
}
}
会产生:
[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(VueCompositionAPI)。
我理解@nuxtjs/composition-api是VueCompositionAPI的包装器。
我不想将新包安装为插件,因此我省略了新包的安装(安装示例:https://github.com/wuruoyun/vue-component-lib-starter/blob/master/src/install.js)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用了
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, } }