如何将Vue组件导入脚本标签？

Question

我的Laravel项目.vue中有一些Vue组件（resources\assets\js\components）。我想将组件导入视图文件.blade.php：

<div id='lol'>
    <some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    import SomeComponent from '.\resources\assets\js\components\some.vue
    new Vue({
        el: '#lol'
    });
</script>

我在控制台Uncaught SyntaxError: Unexpected identifier上遇到了错误：import

  

我不想在app.js中注册组件

Answer 1

如果您不想使用编译器，可以使用http-vue-loader之类的库，该库提供了执行此操作的功能。

重要：该库的作者本身不建议将此库用于生产环境。相反，他建议您编译.vue文件。

使用http-vue-loader库时，您的代码段如下所示：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>


<div id='lol'>
   <some-component></some-component>
</div>

<script>
new Vue({
   components: {
      'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
   },
   el: '#lol',

});
</script>

或者，您可以编译并导出vue component as a library，然后可以将其添加到项目中。

要将组件导出为库，首先需要为组件创建一个入口点，例如：'resources \ assets \ js \ components \ index.js'< / strong>。在此入口点，您将在全球范围内注册组件。

import Vue from "vue";
import Some from "./some.vue"

const Components = {Some};

Object.keys(Components).forEach(name=>{
  Vue.component(name,Components[name])
})


export default Components;

接下来，您需要在 package.json 中定义一个构建库的构建步骤，该步骤链接到组件的入口点：

"scripts": {
   ...
   "build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
  ...
},

接下来，调用此构建步骤，例如通过调用' yarn build-bundle '或等效的npm。

最后，您可以将已编译的组件添加到您的网页。请注意，您不需要显式包含组件，因为您之前已在全局范围内进行了注册。还要注意，您需要在脚本段中添加 type =“ module” 属性，因为否则您将无法使用 import 语句。最后，编译后的库的输出路径是 vue.config.js 中使用的路径。

<div id='lol'>
   <some-component></some-component>
</div>

<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";

const app = new Vue({
  el: '#lol',
})
</script>