如何在浏览器中使用Vue组件库？

Question

我有一个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>

​

Answer 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>

​

Answer 2

我认为您应该使用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捆绑在一起，并将js / css文件捆绑在您的dist/目录中，如果您将JS和CSS加载到浏览器中的HTML文件中，则可以在任何网站中使用组件。

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

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

new Vue({
    el: '#my-component',
    render: h => h(MyComponent)
  })