精华内容
下载资源
问答
  • vue代码规范

    2021-03-11 14:58:18
  • vue 代码规范

    2019-03-19 09:20:10
    单文件组件文件名称 官方推荐单词大写开头 (PascalCase)和横线连接 (kebab-case)。...mycomponent.vue myComponent.vue // good my-component.vue 紧密耦合的组件名 // bad components/ |- TodoL...

    单文件组件文件名称

    官方推荐单词大写开头 (PascalCase)和横线连接 (kebab-case)。两种命名方式

    本项目采取前,始终使用单词大写开头 (PascalCase)。

    // bad
    mycomponent.vue
    myComponent.vue
    
    // good
    my-component.vue
    

    紧密耦合的组件名

    // bad
    components/
    |- TodoList.vue
    |- TodoItem.vue
    └─ TodoButton.vue
    
    // good
    components/
    |- TodoList.vue
    |- TodoListItem.vue
    └─ TodoListItemButton.vue
    

    自闭合组件

    在单文件组件中没有内容的组件应该是自闭合的。

    <!-- bad -->
    <my-component></my-component>
    
    <!-- good -->
    <my-component />
    

    Prop 名大小写

    在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。

    // bad
    export default {
      props: {
        'greeting-text': String
      }
    };
    
    // good
    export default {
      props: {
        greetingText: String
      }
    }
    
    <!-- bad -->
    <welcome-message greetingText="hi" />
    
    <!-- good -->
    <welcome-message greeting-text="hi" />
    

    Props 换行

    多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。

    <!-- bad -->
    <my-component foo="a" bar="b" baz="c" />
    
    <!-- good -->
    <my-component
      foo="a"
      bar="b"
      baz="c"
    />
    

    指令缩写

    指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:

    <!-- bad -->
    <input
      v-bind:value="value"
      v-on:input="onInput"
    >
    
    <!-- good -->
    <input
      :value="value"
      @input="onInput"
    >
    

    Props 顺序

    标签的 Props 应该有统一的顺序,依次为指令、属性和事件。

    <my-component
      v-if="if"
      v-show="show"
      v-model="value"
      ref="ref"
      :key="key"
      :text="text"
      @input="onInput"
      @change="onChange"
    />
    

    组件选项的顺序

    export default {
      name: '',
    
      mixins: [],
    
      components: {},
    
      props: {},
    
      data() {},
    
      computed: {},
    
      watch: {},
    
      created() {},
    
      mounted() {},
    
      destroyed() {},
    
      methods: {}
    };
    

    组件选项中的空行

    组件选项较多时,建议在属性之间添加空行。

    export default {
      computed: {
        formattedValue() {
          // ...
        },
    
        styles() {
          // ...
        }
      },
    
      methods: {
        onInput() {
          // ...
        },
    
        onChange() {
          // ...
        }
      }
    };
    展开全文
  • 突然记起之前的里面没有写关闭 vue 代码规范的方法 在 config 文件夹下面的 index.js 文件中修改 useEslint: false ,默认是 true ,改为 false 就好了 一点点笔记,以便以后翻阅。

    config 文件夹下面的 index.js 文件中修改 useEslint: false ,默认是 true ,改为 false 就好了
    在这里插入图片描述


    一点点笔记,以便以后翻阅。

    展开全文
  • vue代码规范(公司内部使用) UI框架选择 PC端Vue项目UI框架优先选择:Element UI 文件夹、组件命名规范,组件结构规范 文件夹: 1.文件夹名称应统一格式,小驼峰命名,见名思意,其余文件夹名称统一按照项目结构...

    vue代码规范(公司内部使用)

    UI框架选择
    PC端Vue项目UI框架优先选择:Element UI
    文件夹、组件命名规范,组件结构规范
    文件夹:
    1.文件夹名称应统一格式,小驼峰命名,见名思意,其余文件夹名称统一按照项目结构目录命名规范统一命名。
    2.文件路径按照菜单定义。顶级菜单对应一个一级文件夹,依次类推。
    ⦁ 基础组件:
    当项目中需要自定义比较多的基础组件的时候,比如一些button,input,icon,建议以一个统一的单词开头,或者放到通用文件夹统一管理,这样做的目的是为了方便查找。
    公共组件应该都放到components文件夹下,单个组件独 立一个文件夹,用来放相对应的vue文件以及页面相关的样式 文件,样式少可直接写到页面组件里边,这样更符合组件化 的思想。组件结构:
    组件结构遵循从上往下template,script,style的结构。
    ⦁ 项目组件:
    组件名以单词大写开头,当多个单词拼写成的组件时,采用驼峰式命名规则。一般是多个单词全拼,减少简写的情况,这样增加可读性。
    页面级组件应该放到相对应页面文件夹下,比如一些组件只有这个页面用到,其他地方没有用到的,可以直接放到页面文件夹,增加components子文件夹。
    组件样式
    单个组件样式一般可直接写到组件下style标签下,为了防止样式污染,添加scoped属性或者使用bem(block块,element元素,modifier修饰符)命名的class,bem实体名称全是小写字母或者数字,eg:menu__item–selected,推荐使用bem,也可以通过设置作用域来防止样式污染,写样式的 时候尽量少写元素选择器(比如 div ,p { 样式 }),为了提高代码查找速度,可以用类选择器,标签里行内样式较多的时候,建议使用class抽离出来 。
    Template模板文件
    1.尽量使用以.vue结束的单文件组件,方便管理,结构清晰。
    2.标签语义化,避免清一色的div元素
    3.DOM的层级数尽可能少,优化渲染速度。
    4.编写业务代码时,尽量查看原型后开发,页面布局样式尽量保持一致。比如列表页面的查询和表格等通用功能。先确认后开发。
    5.尽量少使用br标签换行。使用布局flex,grid等(ps:grid布局chrome 57以上才支持),少使用table布局。
    6.样式class的命名:统一以小写字母开头,小写字母、下划线和数字组成。命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如:xx_left,xx_line。
    7.自定义标签:使用自闭标签的写法。例如:,如果自定义标签中间需要传入slot,则写开始标签和结束标签,结束标签必须加/。
    8.v-slot:在vue2.6版本中,slot与slot-scope已被弃用,统一使用v-slot指令。
    9.相同的卡片布局,首先整合数据,尽量使用循环方式去增加,避免变更多处的问题。
    Script
    1.在 script 标签中,遵守 Js 的规范和ES6规范。
    2.组件名称:必须以大写字母开头驼峰法命名。使用时,用小写英文,单词之间使用 ‘-’分割,eg:
    3.Data必须是一个函数。
    4.Props定义:提供默认值,使用type属性校验类型,使用props之前先检查prop是否存在
    5.全局已经引入的组件,不要重复引用注册到局部。
    6.尽量按照Vue钩子调用顺序和推荐顺序书写,components, props,data,computed,watch,created,mounted,activited ,update,methods.
    7.调试信息 console.log() debugger使用完及时删除。
    8.为v-for设置Key值。(不建议 用index 作为 key,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作)
    9.规避v-if和v-for用在一起。或者增加一层
    10.使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。
    11.指令缩写:都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
    12.使用 data 里的变量时请先在 data 里面初始化。
    13.函数中统一使用_this=this来解决全局指向问题。
    14.使用‘===’和‘!==’。
    15.整合数据时尽量使用ES6,Object.assign和 … 扩展符(ps:Object.assign() 为浅复制)
    16.页面定义只是用来转化显示的对象时,直接声明到顶部,属于无需监听的数据。
    17.校验时,先去校验公共库查找是否有对应校验,有则使用,没有则查看是否要多处使用,如果可复用,则进行抽离。
    18.vue项目中尽量减少或避免进行dom操作,全部通过vue数据进行驱动。
    Style
    1.使用 scoped关键字,约束样式生效的范围。
    2.避免使用标签选择器(效率低、损耗性能)。
    3.CSS 属性书写顺序:先决定定位宽高显示大小,再做局部细节修饰!推荐顺序:定位属性(或显示属性,display)->宽高属性->边距属性(margin, padding)->字体,背景,颜色等,修饰属性的定义。
    注释规范
    注意在注释的前后各有一个空格。
    HTML注释:
    CSS注释:/* comment! /
    JS注释:
    行级注释(注意//后面空格):// 正确的注释
    变量声明注释:如果是在类似 Vue 项目的 data 属性中的变量,直接用行级样式跟在后面。
    例如:rightExample: ‘yes’, // 注释直接写这里
    如果是在类,构造函数,或者常量定义中的变量,使用块级注释。/
    comment /
    函数声明注释:不必要在每一个函数都写注释,但是在公共函数,还是建议补全注释,让后面的人不需要重复造轮子。
    复杂的业务逻辑处理说明、特殊情况的代码处理说明,对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明
    Vuex中store
    1.各个文件的命名根据上面的项目结构命名。
    2.应用层级的状态应该集中到单个 store 对象中。
    3.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
    4.异步逻辑都应该封装到 action 里面。
    5.vuex 的dispatch和commit提交mutation的区别:dispatch=>actions用来触发异步操作,commit=>mutation用来触发同步操作的方法。当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成,其他使用commit即可。
    路由
    1.路由至少包含三个选项:path、name、component。path统一小写;name对应于组件中的name,大写开头驼峰;component组件驼峰。名称大写开头的组件
    2.路由使用动态路由。
    Web字体规范
    1.现在统一字体为宋体,在全局样式文件base.css声明下font-family:“SimSun”,“宋体”, 如果遇到组件中设置字体的,直接增加组件样式文件,如element-ui.css在这里修改elementUI组件样式问题。
    组件化及代码复用
    1.当有多处使用相同代码逻辑时,应该将代码逻辑进行抽离,进行代码复用,包括不限于vue mixins、vue components、filters、自定义指令、js函数、sass样式等,且抽离的公共部分尽量不要包含业务逻辑,以保证最大限度的复用性。
    CSS初始化规范
    base.css增加初始样式。
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:“SimSun”,“宋体”;}
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    ol,ul,li { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%;vertical-align:middle; }
    table { border-collapse:collapse; border-spacing:0; }
    p{word-wrap:break-word}
    /
    清除浮动 */
    .clearfix:after {content: “.”; display: block; height:0; clear:both; visibility: hidden;}
    .clearfix { *zoom:1; }

    展开全文
  • vue代码规范文档

    2019-11-02 10:42:49
    本文参照 vue.js风格指南 ... 我自己整理的word文档(不是特别详细-----温故) ... 我们需要逐步,严格的规范自己的代码,才能有更好的成长空间,这些东西说小是小,但是会阻碍成长。要想成为一个牛逼的架...
  • 1.Vue代码规范 https://juejin.im/post/5b67e49551882508603d1431 https://cn.vuejs.org/v2/style-guide/index.html 2.Vue原理 https://zhuanlan.zhihu.com/p/138114429 3.Vue性能优化 ...
  • #Vue 代码规范 必须遵守的规范 ​ 事件名必须以中划线命名 'vue/custom-event-name-casing': 'error' 示例 <template> <!-- ✓ GOOD --> <button @click="$emit('my-event')" /> <!-- ...
  • JavaScriptstandard代码规范: https://standardjs.com/readme-zhcn.html vue规范: https://cn.vuejs.org/v2/style-guide/index.html vue为什么要求组件模板只能有一个根元素 ...
  • 一般写VUE代码 VS code本身的格式化工具,并不能识别XXX.vue的文件 所以不能格式化,我们需要安装Vuter,此功能 具有 格式化代码还有代码高亮的功能。 点击格式化文档,指挥把引号改成双引号,并且在末尾加上分号...
  • Vue 代码规范化指南

    千次阅读 2019-06-02 17:26:26
    这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、...
  • VUE代码注释规范,代码规范

    千次阅读 2019-08-15 10:52:09
    VUE代码注释规范,代码规范 背景 其实关于这一点我是深恶痛绝呀,你说我们吧eslint开了,来敲代码,就能把你的代码给规范了吧,关于组件命名和src结构都是按照VUE目录给的(项目成员已构造),功能注释和调试代码...
  • vue项目代码规范

    2019-08-08 10:23:01
    vue项目代码规范 https://www.jianshu.com/p/bfc0650f0033
  • 关于文件规范,其实是目录规范,包括目录结构和文件命名。 目录结构其实没啥,使用cli默认的就行,不过还是给一个例子吧,这个一般都是放在readme里面。要做好中文解释,每次更改和作者,可以放在里面也可以放在组件...
  • Vue项目代码规范

    2019-03-16 12:38:14
    1、PC端Vue项目UI框架:ElementUI(优先)、iView 2、移动端Vue项目UI框架:mint-ui(优先)、vant 3、sass/scss、less、stylus ????? 推荐less:less相对比sass更简洁,而stylus的语法灵活性开放性过大,不利于团队...
  • VUE关闭代码规范性检测 在vue项目根目录下,创建 vue.config.js : module.exports = { lintOnSave: false }; 完美解决!!
  • Vue开发代码规范

    千次阅读 2019-05-15 07:51:09
    首先说下契机,最近公司发生了几次由于不同人ide格式化差异...虽然由于平时开发除了eslint以外,对相关内容接触不多而碰到了不少坑,但是还是对代码规范以及git有了更深刻理解。 通过查看其它公司制定规范的案例和...
  • Vue项目代码规范与最佳实践,该份代码规范适用于基于Vue技术栈的中台项目。
  • 因为经过了不同人员的开发,代码质量参差不齐,且没有一个统一的规范。 所以。重构的重担就压倒我的肩膀上来了。以下只针对VUE开发规范中的一些个人见解以及网络上一些优秀开发规范,如有不妥,还望海涵!总体来说,...
  • 前端代码规范代码提交规范HTML规范CSS规范JavaScript规范注释命名规范运算符其他:Vue 代码规范常规vuex 代码提交规范 每次提交代码时,commit按规范进行备注,如:本次提交新增了新功能:feat: 新增xx功能 code...
  • vue项目中代码规范

    2019-08-05 02:12:04
    1.最近在跟着视频做一个vue项目,由于刚接触,不太熟悉,报错非常多,其中大多数错误都是因为Eslint校验很严格代码,所以报错不规范以及新版本中render: h => h(App)相当于之前写的 template{},components{App} 2...
  • VUE-CLI项目代码规范V1.0.0。 主要是一些基础,但是又不属于技术栈,平时没有人会教的东西。 欢迎讨论,欢迎补充。
  • vue关闭代码规范Eslint

    千次阅读 2019-04-15 11:02:30
    2020-8-27补充 vue-cli新版本的目录结构跟以往不同,关闭代码规范的位置也有所变化,配置都放在了vue.config.js(位置和package.json在同一级目录中)里面。 下面红框标出的位置就是需要修改的位置 更多详情请移步...
  • vue+webpack 代码规范

    2018-09-17 14:17:56
    eslint eslint 最常见的方法 ,具体使用方法可参考官网。 editorconfig 针对于使用vs-code编辑器的小伙伴,在扩赞中...这种方法是在git commit 之前根据eslint 的设置对代码进行相对应的检查,不符合规范...
  • 团队开发前端VUE项目代码规范

    千次阅读 2018-09-22 20:18:11
    统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码   二、开发SRC目录:   1.Vuex目录 (状态树配置) 2.Router目录(路由配置) 3.Pages目录 (放置主路由组件 注意...
  • 一组件化思想 1什么是组件化 独立的 可复用的 整体化的 2为什么要组件化 实现功能模块的复用 高效率执行 开发单页面复杂应用 ... 多组件的混合使用,多页面,复杂业务(vue-router) ...二vue...
  • 我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种...
  • VUE-CLI项目代码规范

    2021-01-08 12:52:09
    四、Vue.js书写规范… 3 4.1单个.vue文件书写规范… 3 4.2 Vue.js组件相关规范… 3 4.3 Vuex和VueRouter相关规范… 3 4.4 Webpack相关规范… 4   一、命名规则 1.目录名全部小写,srcs下层目录使用复数形式。 2....
  • 如果不喜欢vue里面的代码规范可以手动进行关闭, 操作如下: 找到config文件夹 → index.js文件 → 将useEslint的值改成false 即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,431
精华内容 12,972
关键字:

vue代码规范

vue 订阅