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

迫于龟毛,写 vue 单文件组件的时候,你们都习惯怎么放<template><script>和<style>的顺序?

  •  
  •   shintendo · 2018-12-28 16:56:36 +08:00 · 2953 次点击
    这是一个创建于 2156 天前的主题,其中的信息可能已经有所发展或是发生改变。

    官方的 style guide 推荐 template、script、style 或者 script、template、style,并且强调 style 放最后(因为是可选的)。

    我从来没试过把 script 写最上面,因为这块通常是最长的,放头上怎么想都觉得很奇怪。

    我自己用过 template、style、script 和 template、script、style 这两种写法,都用了相当长时间,我觉得 template 放第一位最大的好处在于,打开一个文件的时候,看 template 更能一目了然地知道它是什么组件。但是不爽的地方在于,如果我把 script 放中间,那么写样式的时候就要上下滚动很长的距离(写样式需要在 style 和 template 之间来回看);反之如果把 style 放中间,写 script 又不方便了。

    我现在的写法是 style、template、script,因为写 style 和写 script 的时候经常都需要对照 template,这样把 template 夹在中间让两者都很方便,而 style 和 script 通常互不影响,离得远也没事。但是坏处是,首先看上去比较别扭(不过习惯了也还好,而且我后来一想,这不就是传统 html 里的书写顺序吗,head 里放样式,body 里放内容,body 底部放脚本,这么一想,还越看越顺眼了)。还有一个问题是打开一个文件,首先看到的是 CSS,无法一目了然地看出这是个什么组件。而且我翻遍了相关讨论,也没见过一个像我这么写的。

    不知道各位大佬的习惯是怎么样。

    5 条回复    2018-12-28 17:20:39 +08:00
    phpcxy
        1
    phpcxy  
       2018-12-28 16:59:48 +08:00
    用 IDE,随便啦~
    imherer
        2
    imherer  
       2018-12-28 17:05:20 +08:00
    template、style、script
    因为一般 style 都比较短,基本上小于另外两者
    shuirong1997
        3
    shuirong1997  
       2018-12-28 17:07:51 +08:00
    template、script、style (至于楼主提到对照的事儿,我一般通过再开一个 Tab 解决)
    Lxxyx
        4
    Lxxyx  
       2018-12-28 17:12:02 +08:00 via Android
    style, templates, script,好处在于 template 会引用到 style 和 script 的代码,这样可以鼠标少滚动一点点
    V2exUser
        5
    V2exUser  
       2018-12-28 17:20:39 +08:00 via Android
    vscode,左侧列表有大纲,点击直达。如果没有,升级版本
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1781 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:28 · PVG 00:28 · LAX 08:28 · JFK 11:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.