如何导入MPA中的vuejs组件依赖？

Question

在单页面应用程序中，我可以这样做，以便在组件中包含一个组件。

$ npm install sagalbot/vue-select


<template>
  <div id="myApp">
    <v-select :value.sync="selected" :options="options"></v-select>
  </div>
</template>
<script>
import vSelect from "vue-select"
  export default {
    components: {vSelect},

    data() {
      return {
    selected: null,
    options: ['foo','bar','baz']
      }
    }
  }
</script>

当我在不同的页面中有一堆js文件或者有时内联javascript时，我该如何在MPA中做到这一点呢？我没有使用任何构建系统。

Answer 1

我强烈推荐使用vue-cli，但是如果由于某些原因这是不可能的，那么我相信，尽管我从来没有尝试过，你基本上需要将你所有的组件和代码添加到一个长的js文件中，或者以正确的顺序包含在你的html文档中。

某些组件库可以这样工作，比如vuetify。您只需在vue.js之后包含整个vuetify.js文件，然后就可以使用所有可用的组件。

我认为做任何大小的东西都会有相当大的工作量，但如果它真的很小，你可以用下面的方式一个接一个地添加组件。

var componentTemplate = 
     `
         // Template code..
    `; 

Vue.component('my-cool-component', {
    template: componentTemplate, 
    data: function() {
           return {
              //
           }
       }
});