如何在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>

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

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 {
              //
           }
       }
});