Question

我正在开发我的第一个vue应用。我决定使用html <script>标签（因此不使用CLI）将其添加到我的项目中。

我可以使用import语句导入存储在.vue文件中的componente吗？

Answer 1

除非使用诸如webpack之类的模块捆绑程序，否则无法导入.vue文件。

但是，定义vue组件有多种方法，不需要您使用.vue文件。

例如，您可以在文件中定义一个组件，如下所示：

helloWorld.js

export default {
  template : `<div>{{ message }}</div>`
  data : () => ({
    message : 'Hello World'
  })
}

然后像这样导入它：

app.js

import HelloWorld from 'helloWorld.js';
new Vue({
  el: '#app',
  components: {
    HelloWorld
  }
});

仅记得在将js文件导入html时添加type="module"：

<body>
  <div id="app">
    <hello-world></hello-world>
  </div>
  <script type="module" src="helloWorld.js"></script>
  <script type="module" src="app.js"></script>
</body>

如何导入组件？

1 个答案: