用 vue 开发前端，有哪些增加代码可读性的插件？

[tctc4869]

做一个单页， 就类似 var app=new vue("div"){……}这种

写的代码多了代码阅读渐渐的变得不方便，用 vscode 编写，但找不到类似中 c#的#region 和#endregion 折叠功能，花括号折叠限制，我一开始是 vue 对象代码和 html 代码写在一个文件里，代码量增多后，就考虑拆分文件，把 vue 对象和 html 拆成两个文件，不过即使拆分成文件，vue 对象的 js 代码但还是有阅读不便的问题

这个时候我想念 c#的部分类了，可以把一个类拆成多个文件，不知道 vue 有没有类似的功能，把一个 vue 对象的代码拆成多个 vue 对象的代码，但编译渲染的时候是看成一个的。vue 的话要怎么做到

例如 vue app=new vue("#DIv"){}; 拆分两个,伪代码 var app1=new vue("#Div"){};var app2=new vue("#Div"){};但编译的时候是看成一个对象的

[xsephiroth]

你是当 JQuery 用了吧

[zhuangzhuang1988]

mixin.

[duan602728596]

感觉用的太不对

[tctc4869]

@duan602728596
@xsephiroth
难道没有碰到过一个 js 文件定义初始化了一个超过 500 行的对象代码么？ 一个 vue 对象的定义初始化超过 500 行，而且属性都参与了绑定，有拆分的办法么？

[nieyujiang]

n 你是不是对 vue 有什么误会.....

[galikeoy]

这是文档都不看直接上手吗，用 vue-cli 吧

[guolaopi]

jsdoc?

我也是写 c#的，
写 vue 基本靠注释，
vscode 应该不支持支持 vs 里那种 ctrl m+h 的区域折叠吧

[galikeoy]

单文件组件 https://cn.vuejs.org/v2/guide/single-file-components.html

[guolaopi]

另外你最后说这个分布类的话你可以参考下 webpack 的 merge 函数，自己搞一个然后拆开写，最后在入口处用 merge 合并你分开写的那些文件，但是这样我觉得是脱裤子放屁。

不要试图把 C#开发习惯带到别处，不然会觉得哪哪都不对劲。

[guolaopi]

还有。。。不太清楚你是怎么写的代码，怎么会多到要把 html 和 js 拆成两个文件？我一般都建议 html 模板超过几十行后都要封装成组件调用的。。

[xcstream]

后端模板

[ljpCN]

单文件组件+ts+class style component+vue-property-decorator

[ljpCN]

@ljpCN 另外楼主的描述很容易让人认为，楼主不知道把界面拆分成各个组件，而是一个组件写完整个页面。

[cyberpoint]

垃圾 vue

[yukiloh]

@ljpCN 我把组件拆成过很碎,view 只有标签,一个区域一个组件
但最后搞得传值麻烦,而且有问题找起来也麻烦

[GzhiYi]

用 pug

[tctc4869]

@ljpCN
拆分成组件有传值麻烦

[ljpCN]

@tctc4869 传值麻烦，vuex 可解

[ljpCN]

@yukiloh 了解一下状态管理

[tctc4869]

@tctc4869
我想要的拆分其实是类似下面这种

new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
func2: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

new Vue({
el: '#app',
data: {

},
methods: {
func1: function () {
this.message="123"; //访问 message
}
}
})

[ljpCN]

@tctc4869 二楼已经给了答案： https://vuejs.org/v2/guide/mixins.html#Basics