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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1642 天前的主题，其中的信息可能已经有所发展或是发生改变。

做一个单页，就类似 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"){};但编译的时候是看成一个对象的

Vue

代码

div

var

21 条回复

xsephiroth

2020-05-16 19:05:19 +08:00 via iPhone

你是当 JQuery 用了吧

zhuangzhuang1988

2020-05-16 19:24:16 +08:00

mixin.

duan602728596

2020-05-16 19:27:08 +08:00 via iPhone

感觉用的太不对

tctc4869

2020-05-16 19:57:34 +08:00

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

nieyujiang

2020-05-16 20:12:31 +08:00

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

galikeoy

2020-05-16 20:35:09 +08:00

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

guolaopi

2020-05-16 20:36:40 +08:00 via Android

jsdoc?

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

galikeoy

2020-05-16 20:36:52 +08:00

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

guolaopi

2020-05-16 20:39:44 +08:00 via Android

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

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

guolaopi

2020-05-16 20:42:41 +08:00 via Android

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

xcstream

2020-05-16 21:49:02 +08:00

后端模板

ljpCN

2020-05-16 22:08:59 +08:00 via Android

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

ljpCN

2020-05-16 22:14:01 +08:00 via Android

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

cyberpoint

2020-05-16 22:15:52 +08:00

垃圾 vue

yukiloh

2020-05-17 02:44:32 +08:00

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

GzhiYi

2020-05-17 09:54:02 +08:00 via iPhone

用 pug

tctc4869

2020-05-17 10:31:34 +08:00

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

ljpCN

2020-05-17 10:35:07 +08:00 via Android

@tctc4869 传值麻烦，vuex 可解

ljpCN

2020-05-17 10:39:53 +08:00 via Android

@yukiloh 了解一下状态管理

tctc4869

2020-05-17 10:41:01 +08:00

@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

2020-05-17 10:51:42 +08:00 via Android

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