vue单文件组件？

Question

看了一眼vue2的单文件组件，貌似是把模板、脚本、样式都塞到一个文件里面。很是不理解这样做有什么好处。。写惯了ng2，一个组件的模板、样式与组件类都是分开文件的，不过都属于一个文件夹下。请问vue2的单文件组件到底有什么优势

Answer 1

这是官方的安利，
https://cn.vuejs.org/v2/guide...介绍

个人觉得
组件开发以后，会尽量的把每个功能放到一个组件中，
这样单个组件的代码其实比较少，放到一个文件中，无论是修改html 、css或js只用打开一个文件
就可以明白其中的关系。

不像之前一样，如果要修改js里的逻辑，还要另外打开html看看dom结构，
或者修改css的时间，也要看对html其他元素有没有影响。

Answer 2

组件其实是很小的模块，分三个文件管理起来更麻烦。 如果是一个文件的话，查看更加方便。

Answer 3

其实你可以认为 vue 和 html 文件也很像呢，就是 HTML 部分没有 HEAD、BODY 之类的标签，而是只有一个 template 标签。

这样做的好处，应该说对于可复用、分治的不太大的组件来说，所有的东西都在一起，不用分别去管理、维护，相关的信息可以很方便地找到，修改也容易。

.vue 文件里面所包含的不同语言块的内容可以使用 vue-loader 加载器加载后转换成 webpack 可以使用的模块，应该说也没有什么明显的坏处吧。

Answer 4

vuejs的作者尤雨溪大大这么做是为了给偏向界面布局的前端一个比较友好编码环境，不需要开启过多的文件。记得vue也是支持jsx的这样的编码方式的。而且vue2也支持了jsx的语法vueJSX,你可以看看，不过写render对于写界面来说实在不好玩，这里只是个建议吧。

Answer 5

我认为这就是作者推荐的文件的一个组织形式。一个文件就是一个完整的组件。这样很清晰、也很方便复用。
不过html、javascript、css混在一起，编写代码时，语法提示、代码高亮、格式化等是个麻烦的问题。现在的编辑器对.vue格式的文件的支持还是不够的。说实话我就适应不了。
当然这样的文件组织作者也没强制使用。可以自己配置webpack，把这三部分都分开，分别独立编译。事实上vue-loader也是独立编译这个三个部分成三个module，然后再打包的。
每个部分都可以按自己的习惯配置对应的loader的：
template/html：vue-template-compiler-loader
css/sass/less：style-loader css-loader sass-loader less-laoder 等
js：根据自己的习惯，es6的话babel-loader，es5就不用配置了

我就是把css单独拆出一个文件了，用sass的模块来管理。html和javascript合在一起，编辑器还能提示也没什么问题。

Answer 6

谢邀

其实这两种都是属于组件化开发，其实就是一种高内聚的编程方式，单独的组件可以被反复重用，至于组件开发的单文件和多文件，由于我们常规开发一般采取多文件，所以会感觉单文件比较怪异，其实从单文件的角度来说，打开一个组件就可以把这个组件的逻辑，样式和模板都看完，其实更加便于阅读和理解，但是其实这些都不是硬性规定的，如果你的团队都接受使用多文件去做一个开发规范，那只要制定好规则就行，vue也是可以用多文件进行开发的

Answer 7

部分即整体么