V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
unt
V2EX  ›  程序员

Vue 项目,请教 V 友们几个问题

  •  
  •   unt · 2022-06-01 14:52:39 +08:00 via iPhone · 2826 次点击
    这是一个创建于 930 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1.vue 项目 views 下的 vue 文件命名规范是怎样的,风格指南中说用大驼峰,潘嘉晨说路由 vue 文件用短横线,然后我也看到很多人用纯小写;</br></br>
    2. 大量表格的项目,有没有必要把“搜索框,表格体,分页”三大组件封装成一个组件使用</br></br>
    3. 多人协作中没有协商,各用各封装的组件(算是代码冗余吧)可不可行,对性能和打包大小的影响大不大</br></br>
    4. 在 V 友们的经验中,影响打包大小(本人平时用 webpack-bundle-analyzer 看)的最关键因素是什么,是引入?还是环境配置?还是什么
    20 条回复    2022-06-02 09:27:58 +08:00
    lifesimple
        1
    lifesimple  
       2022-06-01 15:12:23 +08:00   ❤️ 1
    1. https://cn.vuejs.org/v2/style-guide/index.html 参考下这个 单人项目怎么写都没问题 不然就大家统一一个写法
    2. 大量这样同样的页面需求 建议封装一个组件
    3. 可行,你可以用工具分析下,建议协商 避免同样项目里重复轮子
    4. 不清楚 可以网上找找优化的文章看看
    waiaan
        2
    waiaan  
       2022-06-01 15:22:34 +08:00   ❤️ 1
    4 、
    生产环境尽量把依赖的库单独引入(比如 vue 、elementui 那些),不要放到 webpack 里打包。
    superfatboy
        3
    superfatboy  
       2022-06-01 15:27:46 +08:00   ❤️ 1
    2 、大量表格的项目, 建议封装,能节省不少时间
    3 、人手封装一个肯定是不行,建议团队协作的话,沟通好,写好文档,避免重复的分装
    murmur
        4
    murmur  
       2022-06-01 15:29:35 +08:00   ❤️ 1
    1 、你随便
    2 、没有
    3 、这个主要怕后期维护灾难,尤其是改风格样式的时候,总有漏的
    4 、其实你肉眼就知道哪些组件大,比如富文本编辑器、图表,还有一些插件自带的 i18n ,这些东西解决好了剩下的大小基本就和业务有关
    wangtian2020
        5
    wangtian2020  
       2022-06-01 15:31:53 +08:00   ❤️ 1
    1. 点 vue 文件我用短横线命名
    2. 有必要,我常写的页面中一个页面可能就“搜索框,表格体,分页”再加上一些操作按钮就构成整个页面了。在你的场景中你描述一个页面有多个这样的整体,分隔成多个文件容易管理,能不能复用倒无所谓
    3.如果组件是同一个页面,多个人用不同的代码各实现一遍那不好,如果要修改那要改多遍容易出错。
    4.( vite )组件按需引入,静态引用图片是否与项目文件分离
    rabbbit
        6
    rabbbit  
       2022-06-01 15:56:14 +08:00   ❤️ 1
    个人习惯 Component 和 View 以及 template 使用组件全大驼峰,方便重构
    路由是懒加载的话影响不大, 可以先参考设计稿,找出统一的结构封装成组件,例如 用 element 但是某些组件有常用的设置和样式用 $attrs 和 $listener 包一层封装成组件
    大的或常用的依赖包可以用 splitChunks 拆出来
    rabbbit
        7
    rabbbit  
       2022-06-01 15:59:22 +08:00
    vue-cli Preload 和 Prefetch 可以酌情考虑关掉,例如很重的后台管理或移动端页面可以关掉这俩.
    rabbbit
        8
    rabbbit  
       2022-06-01 16:02:11 +08:00
    搭车问个问题, vscode 能这么搜索吗?
    例如搜索 fooBar, 能搜到所有的 foo-bar fooBar FooBar
    wu67
        9
    wu67  
       2022-06-01 16:06:25 +08:00   ❤️ 1
    1 随便, 我喜欢驼峰, 有人喜欢连字符, 有段时间团队里开的短期项目要求连字符, 结果写着写着我自己都乱了, 现在整个项目里啥风格都有, 能看懂就行, (团队里)大家都懒得动了...
    2 个人建议不要. 越多人参与开发月乱, 例如我曾经接受过的一个烂坑, 类似的表格组件有 4 5 种, 怎么来的呢, ui 画图每次都有点不一样, 然后前后经历几个开发人员接手, 大家都不熟悉, 然后套上去发现样式不一样, 就开始自己造轮子...我都不知道怎么吐槽了
    3 公用的组件单独给一个人整(或者你们老大整), 让他出文档, 后面不按约束来的, 直接在周会上批斗就行
    4 随缘了. 其实大部分情况下, 你的项目根本没必要优化这点, 因为项目是业务值钱、业务优先实现、实现时间短暂, 反正就是开发人员自己的 kpi 驱动而已...
    wu67
        10
    wu67  
       2022-06-01 16:07:39 +08:00
    @rabbbit 印象中连字符不行. 大小写可以, 搜索过滤调整为大小写不敏感就可以了, 这也就我为什么喜欢驼峰的原因, 一定程度上能提供模糊匹配
    zyy314680012
        11
    zyy314680012  
       2022-06-01 16:23:21 +08:00 via Android
    eslint 要求用短横线
    unt
        12
    unt  
    OP
       2022-06-01 16:55:46 +08:00 via iPhone
    辛苦各位打字,全部感谢了一遍……
    其他命名我都比较明确,就是 views 下的文件命名比较苦恼(我知道两种都可以,但我有点强迫症)。
    请问 vue 文件以短横线命名的优点是什么,有没有什么现实背景
    liyang5945
        13
    liyang5945  
       2022-06-01 17:50:14 +08:00
    @unt #12 views 我认为是横线命名更好,与路由统一,便于识别
    toesbieya
        14
    toesbieya  
       2022-06-01 17:54:43 +08:00
    短横线好读啊,单词越多越比驼峰好读
    skyrem
        15
    skyrem  
       2022-06-01 17:57:19 +08:00
    @rabbbit #8 正则搜啊 foo-?bar 把大小写敏感关了
    learnshare
        16
    learnshare  
       2022-06-01 17:59:55 +08:00
    文件名 /路径一律小写 + 短横线
    避免有人不会设置系统 /Git 区分文件名大小写,导致的一系列问题

    统一 UI 组件和设计风格是很难的事情,因为产品、UI 和开发水平不够 /不一致,看谁的拳头硬吧
    dcsuibian
        17
    dcsuibian  
       2022-06-01 18:08:00 +08:00 via Android
    我是看是否是组件,比如 TaskBar.vue 或 TaskBar/index.vue 。

    但如果只是划分用的目录,我就喜欢用小写+短横线,比如 user-center 这种。
    dcsuibian
        18
    dcsuibian  
       2022-06-01 18:11:39 +08:00 via Android
    url 中域名不区分大小写,但域名下的路径是区分的。
    mac 、winddows 系统是不区分文件大小写。
    其实没啥影响,但总体来说我比较偏向于小写 - 短横线的格式。url 和文件都是。

    个人其实无所谓,不过特别不喜欢下划线_,感觉怪丑的
    chenluo0429
        19
    chenluo0429  
       2022-06-01 20:45:34 +08:00
    划分用的目录用 snake-case ,vue 组件名称,无论是单文件还是 tsx ,都是 CamelCase ,并且要求文件名,导入的组件名,使用时的组件名完全一致。ts 文件名没有强制要求
    zhangjiancheng
        20
    zhangjiancheng  
       2022-06-02 09:27:58 +08:00
    组件命名可以参考 vue 的风格指南,我个人是把文件夹作为组件名,然后根组件以 index.vue 命名(似乎和 React 组件命名风格有点类似)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5348 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 05:47 · PVG 13:47 · LAX 21:47 · JFK 00:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.