Bagaimana untuk berkongsi kod khusus vue/nuxt biasa antara pakej yang berbeza? Saya tidak mahu menggunakan monorepo, tetapi saya mempunyai beberapa kod kongsi yang ingin saya pisahkan ke dalam pakejnya sendiri. Kod kongsi (pakej baharu) ini ditulis menggunakan @nuxtjs/composition-api dan hanya dikongsi dikira dan kaedah digunakan berulang kali dalam komponen/templat yang berbeza. Saya tidak mahu pakej ini disediakan sebagai pemalam. Sebaliknya import terus untuk mengambil kesempatan daripada goncangan pokok (sama seperti komposisi-api). Saya biasa menggunakan rollupjs

Fungsi pengiraan berasingan dikongsi oleh kompilasi Vue ke dalam pakej berasingan-Soal Jawab Rangkaian PHP Cina

Soal Jawab

Fungsi pengiraan berasingan dikongsi oleh kompilasi Vue ke dalam pakej berasingan

P粉421119778 2023-09-01 17:46:49 pandangan 824

Vue.js

Bagaimana hendak berkongsi <kod>vue/nuxt</code>kod khusus antara pakej yang berbeza? Saya tidak mahu menggunakan <kod>monorepo</code>, tetapi saya mempunyai beberapa kod kongsi yang ingin saya pisahkan ke dalam pakejnya sendiri. Kod kongsi (pakej baharu) ini ditulis menggunakan <code>@nuxtjs/composition-api</code>, hanya <code>computed</code> dan <code> yang digunakan berulang kali dalam komponen berbeza /templates ;methods</code>. Saya tidak mahu pakej ini disediakan sebagai pemalam. Sebaliknya, import terus untuk memanfaatkan gegaran pokok (sama seperti <code>composition-api</code>). Saya biasa menggunakan <code>rollupjs</code> <pre class="brush:php;toolbar:false;">//Pakej baharu //index.js eksport { lalai sebagai isTrue } daripada './src/isTrue' ... //src/isTrue import { dikira } daripada '@nuxtjs/composition-api' eksport lalai (p) => return computed(() => p === 'true') //Saya tidak pasti sama ada ini akan memusnahkan responsif? ! ? ! }</pre> Saya tiada masalah menyusunnya ke <kod>.ssr, .esm, .min</code> format melalui <code>rollupjs</code> Masalah berlaku apabila saya mengimport pakej baharu ke dalam fail yang berfungsi. <pre class="brush:php;toolbar:false;">import { isTrue } daripada 'new-package' eksport lalai{ nama: 'testComp', persediaan(props){ kembali { isActive: isTrue(props.active) } }</pre> akan menghasilkan: <pre class="brush:php;toolbar:false;">[vue-composition-api] Vue.use(VueCompositionAPI) mesti dipanggil sebelum menggunakan sebarang fungsi. </pra> Saya faham bahawa <code>@nuxtjs/composition-api</code> ialah pembungkus untuk VueCompositionAPI. Saya tidak mahu memasang pakej baharu sebagai pemalam, jadi saya meninggalkan pemasangan pakej baharu (contoh pemasangan: https://github.com/wuruoyun/vue-component-lib-starter/blob /master/src/install .js)

Your Answer

serahkan

1 jawapan

Terpakai options API

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

Gunakan rollupjs untuk menyusun library.js dan mengimportnya

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

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

2023-09-02 00:26:17

serahkan