0

我有一个 Vue 组件库。我通过汇总为浏览器构建。但是我不能在带有 CDN 的浏览器中使用。我究竟做错了什么？我已经尝试<script type="module">了很多其他的东西。这是一个例子：

<div id="app">
  <MultiSplitPane split="horizontal" height="400px" width="1000px">
    <Pane>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </MultiSplitPane>
</div>


<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'; 
  import { MultiSplitPane, Pane } from 'https://raw.githubusercontent.com/dgknca/vue-multi-split-pane/master/dist/vue-multi-split-pane.esm.js'; 
  
new Vue({ 
  el: '#app', 
  components: { MultiSplitPane, Pane } 
})
</script>

也试过这个

new Vue({
  el: '#app'
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://raw.githubusercontent.com/dgknca/vue-multi-split-pane/master/dist/vue-multi-split-pane.min.js"></script>

<div id="app">
  <MultiSplitPane
    split="horizontal"
    height="400px"
    width="1000px"
    resizerWidth="30px"
    classes="v-pane-custom">
    <Pane>
      <template v-slot:resizer>
        resizer slot
      </template>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </MultiSplitPane>
</div>

4

2 回答 2

1

我将我的组件与汇总捆绑在一起，并找到了定义组件的正确方法。这就像我想要的那样工作。

Vue.component('MultiSplitPane', VueMultiSplitPane.MultiSplitPane)
Vue.component('Pane', VueMultiSplitPane.Pane)

new Vue({
  el: '#app'
})
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
body {
  font-family: 'Fira Code', monospace;
  background: #d8d1d9;
}

.v-pane-custom .v-pane .content {
  background: #fff;
}

.v-pane-custom .content .innerContent {
  padding: 20px;
  line-height: 1.5;
}

.paneNested>.content>.innerContent {
  padding: 0;
}
<div id="app">
  <multi-split-pane split="horizontal" height="400px" width="1000px" resizerWidth="30px" classes="v-pane-custom">
    <Pane>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </multi-split-pane>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-multi-split-pane@1.1.1/dist/vue-multi-split-pane.min.js"></script>

于 2020-11-27T17:54:11.220 回答
1

我认为你应该使用 Bili 来构建你的库： https ://github.com/egoist/bili

试试这个配置bili.config.js：

const magicImporter = require('node-sass-magic-importer');

module.exports = {
  banner: true,
  output: {
    extractCSS: false,
  },
  plugins: {
    vue: {
      css: true
    },
    style: {
      preprocessOptions: {
        scss: {
          importer: magicImporter(),
        },
      },
    },
  }
};

在你的package.json：

    "build": "vue-cli-service build --target lib --inline-vue src/index.js"

在此之后，您可以捆绑您的库，npm run build并且您将在您的dist/目录中捆绑 js / css 文件，如果您在浏览器中以 HTML 文件加载该 JS 和 CSS，您可以在任何网站中使用组件。

不要错过index.js将组件安装到元素的过程，如下所示：

import Vue from 'vue';
import MyComponent from "./MyComponent.vue";

new Vue({
    el: '#my-component',
    render: h => h(MyComponent)
  })
于 2020-11-27T08:26:00.263 回答