VueJS WebPack将javascript与vue

Question

我正在学习VueJs并且已经按照教程使用vue-cli WebPack模板生成了一个有效的应用程序。一切正常;但我有点强迫症并且讨厌VS2017不在vue文件中格式化内联javascript所以：

• 我将javascript从users.vue移到另一个文件users.js，所以......
• 现在VS2017愉快地格式化js代码，突出显示括号对等
• 在原始广告中包含<script src>。

现在当我npm run dev时，我得到了：

[Vue warn]: Failed to mount component: template or render function not defined. (found in <Users>) vue.esm.js (559,1)

......显然组件没有加载。

说实话，我有点不知所措从哪里开始寻找。我尝试了一些我不应该拆分js的东西，或者默认的WebPack设置可能有问题吗？当我超越教程到现实世界然后重用和分离组件时，我无法相信将js拆分出来有什么不对吗？

旁注是否有一个插件可以在VS2017上的Vue文件中格式化内联javascript？我有VueJs 2017和CodeMaid扩展，但都没有帮助格式化代码。

我在https://github.com/9swampy/SplitVueJs

创建了一个问题示例

Answer 1

<template>
//your template
</template>

<script>
import users from './users.js';
export default users;
</script>

这应该适用于webpack模板。

Answer 2

https://forum.vuejs.org/t/split-js-out-from-vue-singlefilecomponent/8418/5?u=9swampy提供了答案。公平地说，没有看GitHub回购，我的问题没有足够的细节;基本上，我引入了一个命名冲突，没有明确地将vue导入指向users.vue，而是默认为users.js。

因此从

更新App.vue

  

从'./components/Hello'

导入Hello

到

  

从'./components/Hello.vue'

导入Hello

...解决了这个问题。

Doh：）