V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tctc4869
V2EX  ›  Vue.js

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

  •  
  •   tctc4869 · 2020-05-16 18:43:16 +08:00 · 2664 次点击
    这是一个创建于 1653 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    21 条回复
    xsephiroth
        1
    xsephiroth  
       2020-05-16 19:05:19 +08:00 via iPhone   ❤️ 1
    你是当 JQuery 用了吧
    zhuangzhuang1988
        2
    zhuangzhuang1988  
       2020-05-16 19:24:16 +08:00
    mixin.
    duan602728596
        3
    duan602728596  
       2020-05-16 19:27:08 +08:00 via iPhone
    感觉用的太不对
    tctc4869
        4
    tctc4869  
    OP
       2020-05-16 19:57:34 +08:00
    @duan602728596
    @xsephiroth
    难道没有碰到过一个 js 文件定义初始化了一个超过 500 行的对象代码么? 一个 vue 对象的定义初始化超过 500 行,而且属性都参与了绑定,有拆分的办法么?
    nieyujiang
        5
    nieyujiang  
       2020-05-16 20:12:31 +08:00
    n 你是不是对 vue 有什么误会.....
    galikeoy
        6
    galikeoy  
       2020-05-16 20:35:09 +08:00
    这是文档都不看直接上手吗,用 vue-cli 吧
    guolaopi
        7
    guolaopi  
       2020-05-16 20:36:40 +08:00 via Android
    jsdoc?

    我也是写 c#的,
    写 vue 基本靠注释,
    vscode 应该不支持支持 vs 里那种 ctrl m+h 的区域折叠吧
    galikeoy
        8
    galikeoy  
       2020-05-16 20:36:52 +08:00
    guolaopi
        9
    guolaopi  
       2020-05-16 20:39:44 +08:00 via Android
    另外你最后说这个分布类的话你可以参考下 webpack 的 merge 函数,自己搞一个然后拆开写,最后在入口处用 merge 合并你分开写的那些文件,但是这样我觉得是脱裤子放屁。

    不要试图把 C#开发习惯带到别处,不然会觉得哪哪都不对劲。
    guolaopi
        10
    guolaopi  
       2020-05-16 20:42:41 +08:00 via Android
    还有。。。不太清楚你是怎么写的代码,怎么会多到要把 html 和 js 拆成两个文件?我一般都建议 html 模板超过几十行后都要封装成组件调用的。。
    xcstream
        11
    xcstream  
       2020-05-16 21:49:02 +08:00
    后端模板
    ljpCN
        12
    ljpCN  
       2020-05-16 22:08:59 +08:00 via Android
    单文件组件+ts+class style component+vue-property-decorator
    ljpCN
        13
    ljpCN  
       2020-05-16 22:14:01 +08:00 via Android
    @ljpCN 另外楼主的描述很容易让人认为,楼主不知道把界面拆分成各个组件,而是一个组件写完整个页面。
    cyberpoint
        14
    cyberpoint  
       2020-05-16 22:15:52 +08:00
    垃圾 vue
    yukiloh
        15
    yukiloh  
       2020-05-17 02:44:32 +08:00
    @ljpCN 我把组件拆成过很碎,view 只有标签,一个区域一个组件
    但最后搞得传值麻烦,而且有问题找起来也麻烦
    GzhiYi
        16
    GzhiYi  
       2020-05-17 09:54:02 +08:00 via iPhone
    用 pug
    tctc4869
        17
    tctc4869  
    OP
       2020-05-17 10:31:34 +08:00
    @ljpCN
    拆分成组件有传值麻烦
    ljpCN
        18
    ljpCN  
       2020-05-17 10:35:07 +08:00 via Android
    @tctc4869 传值麻烦,vuex 可解
    ljpCN
        19
    ljpCN  
       2020-05-17 10:39:53 +08:00 via Android   ❤️ 1
    @yukiloh 了解一下状态管理
    tctc4869
        20
    tctc4869  
    OP
       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
        21
    ljpCN  
       2020-05-17 10:51:42 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6043 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:46 · PVG 10:46 · LAX 18:46 · JFK 21:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.