如何在 MPA 中导入 vuejs 组件依赖项？答案

【问题标题】：How to import vuejs component dependencies in a MPA?如何在 MPA 中导入 vuejs 组件依赖项？
【发布时间】：2017-10-08 12:01:19
【问题描述】：

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

$ 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 中执行此操作，我有一堆 js 文件，或者有时在不同页面中内联 javascript？我没有使用任何构建系统。

【问题讨论】：

我一定错过了什么。你也这样做。您能否详细说明您正在尝试做的事情？
上述语法在不支持es2015的地方不起作用。
所以你没有使用构建系统对吧？只在标头中包含 vue.js？
是的，我没有使用构建系统。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我强烈推荐使用 vue-cli，但如果由于某种原因无法使用，那么我相信，虽然我从未尝试过，但您基本上需要将所有组件和代码添加到一个长 js 文件中, 或以正确的顺序将它们包含在您的 html 文档中。

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

我认为做任何大尺寸的东西都会做很多工作，但如果它真的很小，你可以通过以下方式一个接一个地添加组件。

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

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

【讨论】：