精华内容
下载资源
问答
  • 一、命名规范 市面上常用的命名规范: camelCase(小驼峰式命名法 —— 首字母小写) PascalCase(大驼峰式命名法 —— 首字母大写) kebab-case(短横线连接式) Snake(下划线连接式) 1.1 项目文件命名 1.1.1 ...

    一、命名规范

    市面上常用的命名规范:

    camelCase(小驼峰式命名法 —— 首字母小写)
    PascalCase(大驼峰式命名法 —— 首字母大写)
    kebab-case(短横线连接式)
    Snake(下划线连接式)

    项目文件命名

    项目名

    全部采用小写方式, 以短横线分隔。例:my-project-name。

    目录名

    参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。

    my-project-name/
    |- BuildScript // 流水线部署文件目录
    |- docs // 项目的细化文档目录(可选)
    |- nginx // 部署在容器上前端项目 nginx 代理文件目录
    |- node_modules // 下载的依赖包
    |- public // 静态页面目录
    |- index.html // 项目入口
    |- src // 源码目录
    |- api // http 请求目录
    |- assets // 静态资源目录,这里的资源会被 wabpack 构建
    |- icon // icon 存放目录
    |- img // 图片存放目录
    |- js // 公共 js 文件目录
    |- scss // 公共样式 scss 存放目录
    |- frame.scss // 入口文件
    |- global.scss // 公共样式
    |- reset.scss // 重置样式
    |- components // 组件
    |- plugins // 插件
    |- router // 路由
    |- routes // 详细的路由拆分目录(可选)
    |- index.js
    |- store // 全局状态管理
    |- utils // 工具存放目录
    |- request.js // 公共请求工具
    |- views // 页面存放目录
    |- App.vue // 根组件
    |- main.js // 入口文件
    |- tests // 测试用例
    |- .browserslistrc// 浏览器兼容配置文件
    |- .editorconfig // 编辑器配置文件
    |- .eslintignore // eslint 忽略规则
    |- .eslintrc.js // eslint 规则
    |- .gitignore // git 忽略规则
    |- babel.config.js // babel 规则
    |- Dockerfile // Docker 部署文件
    |- jest.config.js
    |- package-lock.json
    |- package.json // 依赖
    |- README.md // 项目 README
    |- vue.config.js // webpack 配置
    
    图像文件名

    全部采用小写方式, 优先选择单个单词命名,多个单词命名以下划线分隔。

    banner_sina.gif
    menu_aboutus.gif
    menutitle_news.gif
    logo_police.gif
    logo_national.gif
    pic_people.jpg
    pic_TV.jpg
    
    HTML 文件名

    全部采用小写方式, 优先选择单个单词命名,多个单词命名以下划线分隔。

    |- error_report.html
    |- success_report.html
    
    CSS 文件名

    全部采用小写方式, 优先选择单个单词命名,多个单词命名以短横线分隔。

    |- normalize.less
    |- base.less
    |- date-picker.scss
    |- input-number.scss
    
    JavaScript 文件名

    全部采用小写方式, 优先选择单个单词命名,多个单词命名以短横线分隔。

    |- index.js
    |- plugin.js
    |- util.js
    |- date-util.js
    |- account-model.js
    |- collapse-transition.js
    

    上述规则可以快速记忆为“静态文件下划线,编译文件短横线”。

    Vue 组件命名

    单文件组件名

    文件扩展名为 .vue 的 single-file components (单文件组件)。单文件组件名应该始终是单词大写开头 (PascalCase)。

    components/
    |- MyComponent.vue
    
    单例组件名

    只拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。

    这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。

    比如,头部和侧边栏组件几乎在每个页面都会使用,不接受 prop,该组件是专门为该应用所定制的。

    components/
    |- TheHeading.vue
    |- TheSidebar.vue
    
    基础组件名

    基础组件:不包含业务,独立、具体功能的基础组件,比如日期选择器、模态框等。这类组件作为项目的基础控件,会被大量使用,因此组件的 API 进行过高强度的抽象,可以通过不同配置实现不同的功能。

    应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 —— Base。基础组件在一个页面内可使用多次,在不同页面内也可复用,是高可复用组件。

    components/
    |- BaseButton.vue
    |- BaseTable.vue
    |- BaseIcon.vue
    
    业务组件

    业务组件:它不像基础组件只包含某个功能,而是在业务中被多个页面复用的(具有可复用性),它与基础组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而基础组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。

    掺杂了复杂业务的组件(拥有自身 data、prop 的相关处理)即业务组件应该以 Custom 前缀命名。业务组件在一个页面内比如:某个页面内有一个卡片列表,而样式和逻辑跟业务紧密相关的卡片就是业务组件。

    components/
    |- CustomCard.vue
    
    紧密耦合的组件名

    和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。

    components/
    |- TodoList.vue
    |- TodoListItem.vue
    |- TodoListItemButton.vue
    
    组件名中单词顺序

    组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。 因为编辑器通常会按字母顺序组织文件,所以现在组件之间的重要关系一目了然。如下组件主要是用于搜索和设置功能。

    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue
    

    还有另一种多级目录的方式,把所有的搜索组件放到“search”目录,把所有的设置组件放到“settings”目录。我们只推荐在非常大型 (如有 100+ 个组件) 的应用下才考虑这么做,因为在多级目录间找来找去,要比在单个 components 目录下滚动查找要花费更多的精力。

    完整单词的组件名

    组件名应该倾向于而不是缩写。 编辑器中的自动补全已经让书写长命名的代价非常之低了,而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。

    components/
    |- StudentDashboardSettings.vue
    |- UserProfileOptions.vue
    

    代码参数命名

    name

    组件名应该始终是多个单词,应该始终是 PascalCase 的。 根组件 App 以及 、 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

    export default {
    name: 'ToDoList',
    // ...
    }
    
    prop

    在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。我们单纯的遵循每个语言的约定,在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

    <WelcomeMessage greeting-text="hi"/>
    export default {
      name: 'MyComponent',
      // ...
      props: {
        greetingText: {
          type: String,
          required: true,
          validator: function (value) {
            return ['syncing', 'synced',].indexOf(value) !== -1
          }
        }
      }
    }
    
    router

    Vue Router Path 命名采用 kebab-case 格式。 用 Snake(如:/user_info)或 camelCase(如:/userInfo)的单词会被当成一个单词,搜索引擎无法区分语义。

    // bad
    {
    path: '/user_info', // user_info 当成一个单词
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
    }
    },
    
    // good
    {
    path: '/user-info', // 能解析成 user info
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
    }
    },
    
    模板中组件

    对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的,但是在 DOM 模板中总是 kebab-case 的。

    <!-- 在单文件组件和字符串模板中 -->
    <MyComponent/>
    
    <!--DOM 模板中 -->
    
    <my-component></my-component>
    
    自闭合组件

    在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

    <!-- 在单文件组件和字符串模板中 -->
    <MyComponent/>
    
    <!-- 在所有地方 -->
    
    <my-component></my-component>
    
    变量

    命名方法:camelCase
    命名规范:类型 + 对象描述或属性的方式

    // bad
    var getTitle = "LoginTable"
    
    // good
    let tableTitle = "LoginTable"
    let mySchool = "我的学校"
    
    常量

    命名方法:全部大写下划线分割
    命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

    const MAX_COUNT = 10
    const URL = 'http://test.host.com'
    
    方法

    命名方法:camelCase
    命名规范:统一使用动词或者动词 + 名词形式

    // 1、普通情况下,使用动词 + 名词形式
    // bad
    go、nextPage、show、open、login
    
    // good
    jumpPage、openCarInfoDialog
    
    // 2、请求数据方法,以 data 结尾
    // bad
    takeData、confirmData、getList、postForm
    
    // good
    getListData、postFormData
    
    // 3、单个动词的情况
    init、refresh
    

    动词 含义 返回值
    can 判断是否可执行某个动作 (权 ) 函数返回一个布尔值。true:可执行;false:不可执行;
    has 判断是否含有某个值 函数返回一个布尔值。true:含有此值;false:不含有此值;
    is 判断是否为某个值 函数返回一个布尔值。true:为某个值;false:不为某个值;
    get 获取某个值 函数返回一个非布尔值
    set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
    1.3.9 自定义事件
    自定义事件应始终使用 kebab-case 的事件名。

    不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

    this.$emit('my-event')
    
    <MyComponent @my-event="handleDoSomething" />
    

    不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

    原生事件参考列表[1]
    由原生事件可以发现其使用方式如下:

    <div
      @blur="toggleHeaderFocus"
      @focus="toggleHeaderFocus"
      @click="toggleMenu"
      @keydown.esc="handleKeydown"
      @keydown.enter="handleKeydown"
      @keydown.up.prevent="handleKeydown"
      @keydown.down.prevent="handleKeydown"
      @keydown.tab="handleKeydown"
      @keydown.delete="handleKeydown"
      @mouseenter="hasMouseHoverHead = true"
      @mouseleave="hasMouseHoverHead = false">
    </div>
    

    而为了区分_原生事件_和_自定义事件_在 Vue 中的使用,建议除了多单词事件名使用 kebab-case 的情况下,命名还需遵守为 on + 动词 的形式,如下:

    <!-- 父组件 -->
    <div
      @on-search="handleSearch"
      @on-clear="handleClear"
      @on-clickoutside="handleClickOutside">
    </div>
    
    // 子组件
    export default {
      methods: {
        handleTriggerItem () {
          this.$emit('on-clear')
        }
      }
    }
    
    事件方法

    命名方法:camelCase
    命名规范:handle + 名称(可选)+ 动词

    <template>
      <div
        @click.native.stop="handleItemClick()"
        @mouseenter.native.stop="handleItemHover()">
      </div>
    </template>
    
    <script>
    
    export default {
      methods: {
        handleItemClick () {
          //...
        },
        handleItemHover () {
          //...
        }
      }
    }
    </script>
    

    代码规范

    Vue

    代码结构
    <template>
    
      <div id="my-component">
        <DemoComponent />
      </div>
    </template>
    
    <script>
    import DemoComponent from '../components/DemoComponent'
    
    export default {
      name: 'MyComponent',
      components: {
        DemoComponent
      },
      mixins: [],
      props: {},
      data () {
        return {}
      },
      computed: {},
      watch: {}
      created () {},
      mounted () {},
      destroyed () {},
      methods: {},
    }
    </script>
    
    <style lang="scss" scoped>
    #my-component {
    }
    </style>
    
    data

    组件的 data 必须是一个函数。

    // In a .vue file
    export default {
    data () {
    return {
    foo: 'bar'
    	}
      }
    }
    
    prop

    Prop 定义应该尽量详细。

    export default {
    props: {
    status: {
    type: String,
    required: true,
    validator: function (value) {
    return [
    'syncing',
    'synced',
    'version-conflict',
    'error'
    ].indexOf(value) !== -1
    		}
    	}
      }
    }
    
    computed

    应该把复杂计算属性分割为尽可能多的更简单的属性。 小的、专注的计算属性减少了信息使用时的假设性限制,所以需求变更时也用不着那么多重构了。

    // bad
    computed: {
    price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
    basePrice -
    basePrice \* (this.discountPercent || 0)
    	)
      }
    }
    
    // good
    computed: {
    basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
    },
    discount: function () {
    return this.basePrice \* (this.discountPercent || 0)
    },
    finalPrice: function () {
    return this.basePrice - this.discount
    	}
    }
    
    为 v-for 设置键值

    在组件上必须用 key 搭配 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy)[2]。

    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id">
          {{ todo.text }}
      </li>
    </ul>
    
    v-if 和 v-for 互斥

    永远不要把 v-if 和 v-for 同时用在同一个元素上。

    <!-- bad:控制台报错 -->
    <ul>
      <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id">
          {{ user.name }}
      </li>
    </ul>
    

    一般我们在两种常见的情况下会倾向于这样做:

    为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

    computed: {
    activeUsers: function () {
    return this.users.filter((user) => {
    return user.isActive
    	})
     }
    }
    
    
    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id">
          {{ user.name }}
      </li>
    </ul>
    

    为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)。

    <!-- bad -->
    <ul>
      <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id">
          {{ user.name }}
      </li>
    </ul>
    
    <!-- good -->
    <ul v-if="shouldShowUsers">
      <li
        v-for="user in users"
        :key="user.id">
          {{ user.name }}
      </li>
    </ul>
    
    多个 attribute 的元素

    多个 attribute 的元素应该分多行撰写,每个 attribute 一行。

    <!-- bad -->
    <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
    <MyComponent foo="a" bar="b" baz="c"/>
    
    <!-- good -->
    <img
      src="https://vuejs.org/images/logo.png"
      alt="Vue Logo">
    
    <MyComponent
      foo="a"
      bar="b"
      baz="c"/>
    
    模板中简单的表达式

    组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。

    复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么,而非如何计算那个值。而且计算属性和方法使得代码可以重用。

    // bad
    {{
      fullName.split(' ').map((word) => {
        return word[0].toUpperCase() + word.slice(1)
      }).join(' ')
    }}
    

    更好的做法:

    <!-- 在模板中 -->
    
    {{ normalizedFullName }}
    
    // 复杂表达式已经移入一个计算属性
    computed: {
    normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
    }
    }
    
    带引号的 attribute 值

    非空 HTML 特性值应该始终带双引号。

    <!-- bad -->
    <input type=text>
    <AppSidebar :style={width:sidebarWidth+'px'}>
    
    <!-- good -->
    <input type="text">
    <AppSidebar :style="{ width: sidebarWidth + 'px' }">
    
    指令缩写

    用 : 表示 v-bind:
    用 @ 表示 v-on:
    用 # 表示 v-slot:

    <input
      :value="newTodoText"
      :placeholder="newTodoInstructions">
    
    <input
    @input="onInput"
    @focus="onFocus">
    
    <template #header>
    
      <h1>Here might be a page title</h1>
    </template>
    
    <template #footer>
    
      <p>Here's some contact info</p>
    </template>
    

    HTML

    文件模板

    HTML5 文件模板:

    <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <title>HTML5标准模版</title>
      </head>
      <body>
      </body>
    </html>
    

    移动端:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
        <meta name="format-detection" content="telephone=no">
        <title>移动端HTML模版</title>
    
        <!-- S DNS预解析 -->
        <link rel="dns-prefetch" href="">
        <!-- E DNS预解析 -->
    
        <!-- S 线上样式页面片,开发请直接取消注释引用 -->
        <!-- #include virtual="" -->
        <!-- E 线上样式页面片 -->
    
        <!-- S 本地调试,根据开发模式选择调试方式,请开发删除 -->
        <link rel="stylesheet" href="css/index.css">
        <!-- /本地调试方式 -->
    
        <link rel="stylesheet" href="http://srcPath/index.css">
        <!-- /开发机调试方式 -->
        <!-- E 本地调试 -->
    
    </head>
    <body>
    </body>
    </html>
    

    PC 端:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="your keywords">
        <meta name="description" content="your description">
        <meta name="author" content="author,email address">
        <meta name="robots" content="index,follow">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="renderer" content="ie-stand">
        <title>PCHTML模版</title>
    
        <!-- S DNS预解析 -->
        <link rel="dns-prefetch" href="">
        <!-- E DNS预解析 -->
    
        <!-- S 线上样式页面片,开发请直接取消注释引用 -->
        <!-- #include virtual="" -->
        <!-- E 线上样式页面片 -->
    
        <!-- S 本地调试,根据开发模式选择调试方式,请开发删除 -->
        <link rel="stylesheet" href="css/index.css">
        <!-- /本地调试方式 -->
    
        <link rel="stylesheet" href="http://srcPath/index.css">
        <!-- /开发机调试方式 -->
        <!-- E 本地调试 -->
    
    </head>
    <body>
    </body>
    </html>
    
    元素及标签闭合

    HTML 元素共有以下5种:

    空元素:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
    原始文本元素:script、style
    RCDATA 元素:textarea、title
    外来元素:来自 MathML 命名空间和 SVG 命名空间的元素
    常规元素:其他 HTML 允许的元素都称为常规元素
    为了能让浏览器更好的解析代码以及能让代码具有更好的可读性,有如下约定:

    所有具有开始标签和结束标签的元素都要写上起止标签,某些允许省略开始标签或和束标签的元素亦都要写上。
    空元素标签都不加 “/” 字符。

    <!-- good -->
    <div>
        <h1>我是h1标题</h1>
        <p>我是一段文字,我有始有终,浏览器能正确解析</p>
    </div>
     
    <br data-tomark-pass>
    
    <!-- bad -->
    <div>
        <h1>我是h1标题</h1>
        <p>我是一段文字,我有始无终,浏览器亦能正确解析
    </div>
    
    <br/>
    
    代码嵌套

    元素嵌套规范,每个块状元素独立一行,内联元素可选。

    <div>
        <h1></h1>
        <p></p>
    </div> 
    <p><span></span><span></span></p>
    
    <!-- bad -->
    <div>
        <h1></h1><p></p>
    </div> 
    <p> 
        <span></span>
        <span></span>
    </p>
    

    段落元素与标题元素只能嵌套内联元素。

    <!-- good -->
    <h1><span></span></h1>
    <p><span></span><span></span></p>
    
    <!-- bad -->
    <h1><div></div></h1>
    <p><div></div><div></div></p>
    

    CSS

    样式文件

    样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 “UTF-8”。

    推荐:
    @charset "UTF-8";
    .jdc {}
    
    不推荐:
    /_ @charset 规则不在文件首行首个字符开始 _/
    @charset "UTF-8";
    .jdc {}
    
    /_ @charset 规则没有用小写 _/
    @CHARSET "UTF-8";
    .jdc {}
    
    /_ 无@charset 规则 _/
    .jdc {}
    
    代码格式化

    样式书写一般有两种:一种是紧凑格式 (Compact),一种是展开格式(Expanded)。

    推荐:展开格式(Expanded)
    .jdc {
    display: block;
    width: 50px;
    }
    
    不推荐:紧凑格式 (Compact)
    .jdc { display: block; width: 50px;}
    
    代码大小写

    样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

    推荐:
    .jdc {
    display: block;
    }
    
    不推荐:
    .JDC {
    DISPLAY: BLOCK;
    }
    
    代码易读性

    左括号与类名之间一个空格,冒号与属性值之间一个空格。
    推荐:

    .jdc {
    width: 100%;
    }
    
    不推荐:
    .jdc{
    width:100%;
    }
    

    其它

    1. 缩进换行请使用两个空格。
    2. 大型团队多人协作项目推荐 JavaScript 代码末尾加分号。
    3. 小型个人创新练手项目可尝试使用 JavaScript 代码末尾不加分号的风格,更加清爽简练。

    写在后面的话

    撰写不易, 收集总结用了好几个小时,希望对你有多帮助!

    展开全文
  • vue项目前端规范

    2021-03-26 14:45:18
    前端 vue 开发规范笔记 命名规范组件method方法命名views下文件命名props 命名目录文件夹及子文件规范vue文件基本结构多个特性的元素规范元素特性顺序组件选项顺序注释规范编码规范指令规范Props 规范CSS 规范SASS ...

    前端 vue 开发规范笔记

    # 命名规范

    普通变量

    • 方法:驼峰命名
    • 规范
      • 跟需求的内容相关
      • 复数的时候需要加s

    常量

    • 方法:全部大写
    • 规范:使用大写字母和下划线来组合命名,下划线分割单词

    # 组件

    官方文档推荐及使用遵循规则:

    • PascalCase (单词首字母大写命名)是最通用的声明约定
    • kebab-case (短横线分隔命名) 是最通用的使用约定
      • 组件名应该始终是多个单词的,根组件 App 除外
      • 有意义的名词、简短、具有可读性
      • 命名遵循 PascalCase 约定
        • 公用组件以 Abcd (公司名缩写简称) 开头,如(AbcdDatePicker,AbcdTable)
        • 页面内部组件以组件模块名简写为开头,Item 为结尾,如(StaffBenchToChargeItem,StaffBenchAppNotArrItem)
      • 使用遵循 kebab-case 约定
        • 在页面中使用组件需要前后闭合,并以短线分隔,如( , )
      • 导入及注册组件时,遵循 PascalCase 约定
      • 同时注意:必须符合自定义元素规范:切勿使用保留字

    # method方法命名

    • 驼峰式命名,统一使用动词或者动词+名词形式
    //bad
    go、nextPage、show、open、login
    
      // good
    jumpPage、openCarInfoDialog
    
    • 请求数据方法,以 data 结尾
    //bad
    takeData、confirmData、getList、postForm
    
    // good
    getListData、postFormData
    
    • init、refresh 单词除外
    • 尽量使用常用单词开头(set、get、go、can、has、is)
      常用的动词
      get 获取/set 设置,
      add 增加/remove 删除
      create 创建/destory 移除
      start 启动/stop 停止
      open 打开/close 关闭,
      read 读取/write 写入
      load 载入/save 保存,
      create 创建/destroy 销毁
      begin 开始/end 结束,
      backup 备份/restore 恢复
      import 导入/export 导出,
      split 分割/merge 合并
      inject 注入/extract 提取,
      attach 附着/detach 脱离
      bind 绑定/separate 分离,
      view 查看/browse 浏览
      edit 编辑/modify 修改,
      select 选取/mark 标记
      copy 复制/paste 粘贴,
      undo 撤销/redo 重做
      insert 插入/delete 移除,
      add 加入/append 添加
      clean 清理/clear 清除,
      index 索引/sort 排序
      find 查找/search 搜索,
      increase 增加/decrease 减少
      play 播放/pause 暂停,
      launch 启动/run 运行
      compile 编译/execute 执行,
      debug 调试/trace 跟踪
      observe 观察/listen 监听,
      build 构建/publish 发布
      input 输入/output 输出,
      encode 编码/decode 解码
      encrypt 加密/decrypt 解密,
      compress 压缩/decompress 解压缩
      pack 打包/unpack 解包,
      parse 解析/emit 生成
      connect 连接/disconnect 断开,
      send 发送/receive 接收
      download 下载/upload 上传,
      refresh 刷新/synchronize 同步
      update 更新/revert 复原,
      lock 锁定/unlock 解锁
      check out 签出/check in 签入,
      submit 提交/commit 交付
      push 推/pull 拉,
      expand 展开/collapse 折叠
      begin 起始/end 结束,
      start 开始/finish 完成
      enter 进入/exit 退出,
      abort 放弃/quit 离开
      obsolete 废弃/depreciate 废旧,
      collect 收集/aggregate 聚集

    # views下文件命名

    • 只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue
    • 尽量是名词,且使用驼峰命名法
    • 开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)
    • 名字至少两个单词(good: workbenchIndex)(bad:workbench)

    # props 命名

    • 应该始终使用 camelCase,而在模板中应该始终使用 kebab-case
    <!-- bad -->
    <script>
    props: {
      'greeting-text': String
    }
    </script>
     
    <welcome-message greetingText="hi"></welcome-message>
     
    <!-- good -->
    <script>
    props: {
      greetingText: String
    }
    </script>
     
    <welcome-message greeting-text="hi"></welcome-message>
    
    • 例外
      • 作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
      • 循环变量可以简写,比如:i,j,k 等

    # 目录文件夹及子文件规范

    • 以下统一管理处均对应相应模块
    • 以下全局文件文件均以 index.js 导出,并在 main.js 中导入
    • 以下临时文件,在使用后,接口已经有了,发版后清除
    src                               源码目录
    |-- api                              接口,统一管理
    |-- assets                           静态资源,统一管理
    |-- components                       公用组件,全局文件
    |-- filters                          过滤器,全局工具
    |-- icons                            图标,全局资源
    |-- datas                            模拟数据,临时存放
    |-- lib                              外部引用的插件存放及修改文件
    |-- mock                             模拟接口,临时存放
    |-- router                           路由,统一管理
    |-- store                            vuex, 统一管理
    |-- views                         视图目录
    |   |-- staffWorkbench               视图模块名
    |   |-- |-- staffWorkbench.vue       模块入口页面
    |   |-- |-- indexComponents          模块页面级组件文件夹
    |   |-- |-- components               模块通用组件文件夹

    # vue文件基本结构

    <template>
      <div>
        <!--必须在div中编写页面-->
      </div>
    </template>
    <script>
      export default {
        components : {
        },
        data () {
          return {
          }
        },
        mounted() {
        },
        methods: {
        }
      }
    </script>
    <!--声明语言,并且添加scoped-->
    <style lang="scss" scoped>
    </style>
    

    # 多个特性的元素规范

    分多行撰写,每个特性一行

    <!-- bad -->
    <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
    <my-component foo="a" bar="b" baz="c"></my-component>
     
    <!-- good -->
    <img
      src="https://vuejs.org/images/logo.png"
      alt="Vue Logo"
    >
    <my-component
      foo="a"
      bar="b"
      baz="c"
    >
    </my-component>
    

    # 元素特性顺序

    原生在前,指令在后

    - class
    - id,ref
    - name
    - data-*
    - src, for, type, href,value,max-length,max,min,pattern
    - title, alt,placeholder
    - aria-*, role
    - required,readonly,disabled
    - is
    - v-for
    - key
    - v-if
    - v-else-if
    - v-else
    - v-show
    - v-cloak
    - v-pre
    - v-once
    - v-model
    - v-bind,:
    - v-on,@
    - v-html
    - v-text

    # 组件选项顺序

    - components
    - props
    - data
    - computed
    - created
    - mounted
    - metods
    - filter
    - watch

    # 注释规范

    # 注释列表

    • 公共组件使用说明
    • 各组件中重要函数或者类说明
    • 复杂的业务逻辑处理说明
    • 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
    • 多重 if 判断语句
    • 注释块必须以/**(至少两个星号)开头**/
    • 单行注释使用//

    # 单行注释

    不要在代码后的同一行内加注释

    badvar name =”abc”; // 姓名    
    
    good
    
    // 姓名
    var name = “abc”;         
    

    # 多行注释

    组件使用说明,和调用说明/**
    * 组件名称
    * @module 组件存放位置
    * @desc 组件描述
    * @author 组件作者
    * @date 2020年03月27日12:22:43
    * @param {Object} [title]    - 参数说明
    * @param {String} [columns] - 参数说明
    * @example 调用示例
    *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
    **/
    

    # 编码规范

    # 源码风格

    使用 ES6 风格编码

    • 定义变量使用 let ,定义常量使用 const
    • 静态字符串一律使用单引号或反引号,动态字符串使用反引号
    // bad
    const a = 'foobar'
    const b = 'foo' + a + 'bar'
    
    // acceptable
    const c = `foobar`
    
    // good
    const a = 'foobar'
    const b = `foo${a}bar`
    const c = 'foobar'
    
    • 解构赋值
      • 数组成员对变量赋值时,优先使用解构赋值
      // 数组解构赋值
      const arr = [1, 2, 3, 4]
      // bad
      const first = arr[0]
      const second = arr[1]
      
      // good
      const [first, second] = arr
      
      • 函数的参数如果是对象的成员,优先使用解构赋值
      // 对象解构赋值
      // bad
      function getFullName(user) {
        const firstName = user.firstName
        const lastName = user.lastName
      }
      
      // good
      function getFullName(obj) {
        const { firstName, lastName } = obj
      }
      
      // best
      function getFullName({ firstName, lastName }) {}
      
      • 拷贝数组:用扩展运算符(...)拷贝数组
      const items = [1, 2, 3, 4, 5]
      
      // bad
      const itemsCopy = items
      
      // good
      const itemsCopy = [...items]
      
      • 箭头函数(需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this)
      // bad
      const self = this;
      const boundMethod = function(...params) {
        return method.apply(self, params);
      }
      
      // acceptable
      const boundMethod = method.bind(this);
      
      // best
      const boundMethod = (...params) => method.apply(this, params);
      
      • 模块
        • 如果模块只有一个输出值,就使用 export default,如果模块有多个输出值,就不使用 export default,export default 与普通的 export 不要同时使用
        // bad
        import * as myObject from './importModule'
        
        // good
        import myObject from './importModule'
        
        • 如果模块默认输出一个函数,函数名的首字母应该小写
        function makeStyleGuide() {
        }
        
        export default makeStyleGuide;
        
        • 如果模块默认输出一个对象,对象名的首字母应该大写
        const StyleGuide = {
          es6: {
          }
        };
        
        export default StyleGuide;
        

    # 指令规范

    有缩写一律采用缩写

    // bad
    v-bind:class="{'show-left':true}"
    v-on:click="getListData"
    
    // good
    :class="{'show-left':true}"
    @click="getListData"

    v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一

    <!-- good -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    
    <!-- bad -->
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ul>
    

    避免 v-if 和 v-for 同时用在一个元素上(性能问题)

    • 将数据替换为一个计算属性,让其返回过滤后的列表
      <!-- bad -->
      <ul>
        <li v-for="user in users" v-if="user.isActive" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
      
      <!-- good -->
      <ul>
        <li v-for="user in activeUsers" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
      
      <script>
      computed: {
        activeUsers: function () {
          return this.users.filter(function (user) {
            return user.isActive
          })
        }
      }
      </script>
      
    • 将 v-if 移动至容器元素上 (比如 ul, ol)
      <!-- bad -->
      <ul>
        <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
      
      <!-- good -->
      <ul v-if="shouldShowUsers">
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
      

    # Props 规范

    • 定义应尽量详细
    // bad 这样做只有开发原型系统时可以接受
    props: ['status']
     
    // good
    props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }
    
    • 避免 this.$parent
    • 调试信息 console.log() debugger 使用完及时删除
    • 除了三目运算,if,else 等禁止简写
    // bad
    if (true)
        alert(name);
    console.log(name);
    
    // bad
    if (true)
    alert(name);
    console.log(name)
    
    // good
    if (true) {
        alert(name);
    }
    console.log(name);
    

    # CSS 规范

    通用

    • 统一使用"-"连字符
    • 省略值为 0 时的单位
      // badpadding-bottom: 0px;
      margin: 0em;
      
      // good
      padding-bottom: 0;
      margin: 0;
      
    • CSS 可以做到,就不要使用 JS
    • 适当缩写值,提高可读性(并不希望设置某一值,反而造成了麻烦时可以不缩写)
      // bad
      .box{
        border-top-style: none;
        font-family: palatino, georgia, serif;
        font-size: 100%;
        line-height: 1.6;
        padding-bottom: 2em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0;
      }
      
      // good
      .box{
        border-top: 0;
        font: 100%/1.6 palatino, georgia, serif;
        padding: 0 1em 2em;
      }
      
    • 声明顺序
    显示属性自身属性文本属性和其他修饰
    displaywidthfont
    visibilityheighttext-align
    positionmargintext-decoration
    floatpaddingvertical-align
    clearborderwhite-space
    list-styleoverflowcolor
    topmin-widthbackground
    • 元素选择器应该避免在 scoped 中出现
      • 官方文档说明:在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的
    • 分类的命名方法(使用单个字母加上"-"为前缀)
      • 布局(grid)(.g-)
      • 模块(module)(.m-)
      • 元件(unit)(.u-)
      • 功能(function)(.f-)
      • 皮肤(skin)(.s-)
      • 状态(.z-)
    • 统一语义理解和命名
      布局(.g-)
    语义命名简写
    文档docdoc
    头部headhd
    主体bodybd
    尾部footft
    主栏mainmn
    主栏子容器maincmnc
    侧栏sidesd
    侧栏子容器sidecsdc
    盒容器wrap/boxwrap/box

    # SASS 规范

    嵌套顺序

    • 当前选择器的样式属性
    • 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
    • 伪类元素 (:before and :after)
    • 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
    • 用 Sass 的上下文媒体查询
    • 子选择器作为最后的部分
    .product-teaser {
      // 1. Style attributes
      display: inline-block;
      padding: 1rem;
      background-color: whitesmoke;
      color: grey;
    
      // 2. Pseudo selectors with parent selector
      &:hover {
        color: black;
      }
    
      // 3. Pseudo elements with parent selector
      &:before {
        content: "";
        display: block;
        border-top: 1px solid grey;
      }
    
      &:after {
        content: "";
        display: block;
        border-top: 1px solid grey;
      }
    
      // 4. State classes with parent selector
      &.active {
        background-color: pink;
        color: red;
    
        // 4.2. Pseuso selector in state class selector
        &:hover {
          color: darkred;
        }
      }
    
      // 5. Contextual media queries
      @media screen and (max-width: 640px) {
        display: block;
        font-size: 2em;
      }
    
      // 6. Sub selectors
      > .content > .title {
        font-size: 1.2em;
    
        // 6.5. Contextual media queries in sub selector
        @media screen and (max-width: 640px) {
          letter-spacing: 0.2em;
          text-transform: uppercase;
        }
      }
    }
    

    # 特殊规范

    • 对用页面级组件样式,应该是有作用域的
    • 对于公用组件或者全局组件库,我们应该更倾向于选用基于 class 的 BEM 策略
    <style lang='scss'></style> // bad
    
    <!-- 使用 scoped 作用域 -->
    <style lang='scss' scoped></style> // good
    
    <!-- 使用 BEM 约定 -->
    <style> // good
    .c-Button {
      border: none;
      border-radius: 2px;
    }
    
    .c-Button--close {
      background-color: red;
    }
    </style>
    
    展开全文
  • Vue3项目代码规范

    2021-08-07 21:43:18
    代码规范editorconfig配置prettierrc配置prettierignore配置eslint配置git Husky和eslintgit commit规范代码提交风格代码提交验证 editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发...

    项目结构

    vue3-ts-cms
    ├─ .browserslistrc
    ├─ .editorconfig
    ├─ .eslintrc.js
    ├─ .gitignore
    ├─ .prettierignore
    ├─ .prettierrc
    ├─ babel.config.js
    ├─ package-lock.json
    ├─ package.json
    ├─ public
    │  ├─ favicon.ico
    │  └─ index.html
    ├─ README.md
    ├─ src
    │  ├─ App.vue
    │  ├─ assets
    │  │  └─ logo.png
    │  ├─ components
    │  ├─ main.ts
    │  ├─ shims-vue.d.ts
    ├─ tsconfig.json
    

    editorconfig配置

    EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
    在项目的根目录下创建 .editorconfig 文件后,复制下面配置。
    .editorconfig

    # http://editorconfig.org
    
    root = true # 当前文件是否在根目录下
    
    [*] # 表示所有文件适用
    charset = utf-8 # 设置文件字符集为 utf-8
    indent_style = space # 缩进风格(tab | space)
    indent_size = 2 # 缩进大小
    end_of_line = lf # 控制换行类型(lf | cr | crlf)
    trim_trailing_whitespace = true # 去除行首的任意空白字符
    insert_final_newline = true # 始终在文件末尾插入一个新行
    
    [*.md] # 表示仅 md 文件适用以下规则
    max_line_length = off
    trim_trailing_whitespace = false
    

    PS:若在VSCode配置editorconfig,则需要安装一个插件:EditorConfig for VS Code
    image-20210722215138665

    prettierrc配置

    Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具
    在根目录下创建 .prettierrc 文件后,复制下面配置
    .prettierrc

    {
      "useTabs": false,
      "tabWidth": 2,
      "printWidth": 80,
      "singleQuote": true,
      "trailingComma": "none",
      "semi": false
    }
    
    属性说明
    useTabstrue:使用tab缩进 false:使用空格缩进
    tabWidth在tab是空格的情况下,是几个空格,选择2个
    printWidth当行字符的长度超过设置的长度,代码将换行。推荐80,100
    singleQuotetrue:使用单引号 false:使用双引号
    trailingComma在多行输入的尾逗号是否添加,设置为 none
    semi语句末尾是否要加分号,默认值true,选择false表示不加

    测试prettier生效直接在代码中保存即可见效。

    情况一:保存代码无法格式化。
    原因:可能VSCode有多个保存自动格式化的插件,未设置默认的插件,VSCode不知道选择哪个插件进行格式化
    解决方法:右键->格式化文档 会提醒没有设置默认的格式化插件,选择prettier插件即可,再自动保存时就可以自动格式化了
    情况二:保存代码无法格式化,但是右键->格式化文档可以格式化
    原因:可能VSCode未设置保存文件格式化
    解决方法:文件->设置->搜索栏搜索save->找到Editor: Format On Save并勾选上即可

    prettierignore配置

    不是所有的文件保存的时候都需要格式化,有些文件保存则不需要格式化。此时就需要配置忽略格式化文件配置
    在根目录下创建 .prettierignore 忽略文件,复制下面配置
    .prettierignore

    /dist/*
    .local
    .output.js
    /node_modules/**
    
    **/*.svg
    **/*.sh
    
    /public/*
    

    PS:若在VSCode中配置prettierrc和prettierignore,则需要安装一个插件:prettier
    image-20210722214543454
    PS:配置好prettierrc文件后,保存文件即可格式化。
    快速格式化文件:需要在package.json添加一个脚本,再运行此脚本即可使所有文件都格式化(prettierignore配置忽略的文件除外)

    "prettier": "prettier --write ."
    

    运行脚本

    npm run prettier
    

    在这里插入图片描述

    eslint配置

    在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。
    PS:若在VSCode中,则需要安装一个插件:ESLint
    image-20210722215933360
    解决eslint和prettier冲突的问题:
    安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装,就不需要再安装)

    npm i eslint-plugin-prettier eslint-config-prettier -D
    

    eslintrc.js文件添加一个配置后重启VSCode即可解决冲突问题

    注意:plugin和:之间没有空格,不然会不符合eslint的语法报异常

    "plugin:prettier/recommended"
    

    在这里插入图片描述

    git Husky和eslint

    虽然我们已经要求项目使用 eslint 了,但是不能保证其他组员提交代码之前都将代码格式化了。 也就是我们希望保证代码仓库中的代码都是符合 eslint 规范的。

    那么我们就需要在组员执行 git commit 命令的时候对其进行校验,如果不符合 eslint 规范,那么自动通过规范进行修复。

    那么如何做到这一点呢?可以通过Husky工具:
    husky 是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push

    我们可以使用自动配置命令:

    windows:
    npx husky-init '&&' npm install
    --------------------------------
    linux:
    npx husky-init '&&' npm install
    

    这个自动配置命令会做三件事:

    1.安装husky相关的依赖:
    image-20210723112648927

    2.在项目根目录下创建 .husky 文件夹:

    npx huksy install
    

    image-20210723112719634
    3.在package.json中添加一个脚本:
    image-20210723112817691
    接下来,我们需要去完成一个操作:在进行commit时,执行lint脚本:
    image-20210723112932943
    这个时候我们执行git commit的时候会自动对代码进行lint校验。

    git commit规范

    代码提交风格

    通常我们的git commit会按照统一的风格来提交,这样可以快速定位每次提交的内容,方便之后对版本进行控制。

    但是如果每次手动来编写这些是比较麻烦的事情,我们可以使用一个工具:Commitizen

    • Commitizen 是一个帮助我们编写规范 commit message 的工具;

    1.安装Commitizen

    npm install commitizen -D
    

    2.安装cz-conventional-changelog,并且初始化cz-conventional-changelog:

    npx commitizen init cz-conventional-changelog --save-dev --save-exact
    

    这个命令会帮助我们安装cz-conventional-changelog:

    image-20210723145249096

    并且在package.json中进行配置:

    这个时候我们提交代码需要使用 npx cz

    • 第一步是选择type,本次更新的类型
    Type作用
    feat新增特性 (feature)
    fix修复 Bug(bug fix)
    docs修改文档 (documentation)
    style代码格式修改(white-space, formatting, missing semi colons, etc)
    refactor代码重构(refactor)
    perf改善性能(A code change that improves performance)
    test测试(when adding missing tests)
    build变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
    ci更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等
    chore变更构建流程或辅助工具(比如更改测试环境)
    revert代码回退
    • 第二步选择本次修改的范围(作用域)

    image-20210723150147510

    • 第三步选择提交的信息

    image-20210723150204780

    • 第四步提交详细的描述信息

    image-20210723150223287

    • 第五步是否是一次重大的更改

    image-20210723150322122

    • 第六步是否影响某个open issue

    image-20210723150407822

    我们也可以在scripts中构建一个命令来执行 cz:

    image-20210723150526211

    代码提交验证

    如果我们按照cz来规范了提交风格,但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢?

    • 我们可以通过commitlint来限制提交;

    1.安装 @commitlint/config-conventional 和 @commitlint/cli

    npm i @commitlint/config-conventional @commitlint/cli -D
    

    2.在根目录创建commitlint.config.js文件,配置commitlint

    module.exports = {
      extends: ['@commitlint/config-conventional']
    }
    

    3.使用husky生成commit-msg文件,验证提交信息:

    npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
    
    展开全文
  • EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 VSCode需要安装一个插件:EditorConfig for VS Code 我们需要在代码主目录下,创建一个 .editorconfig 文件,将下面的配置...

    1. 集成editorconfig配置

    EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

    VSCode需要安装一个插件:EditorConfig for VS Code

    我们需要在代码主目录下,创建一个 .editorconfig 文件,将下面的配置复制进去即可

    # http://editorconfig.org
    
    root = true
    
    [*] # 表示所有文件适用
    charset = utf-8 # 设置文件字符集为 utf-8
    indent_style = space # 缩进风格(tab | space)
    indent_size = 2 # 缩进大小
    end_of_line = lf # 控制换行类型(lf | cr | crlf)
    trim_trailing_whitespace = true # 去除行首的任意空白字符
    insert_final_newline = true # 始终在文件末尾插入一个新行
    
    [*.md] # 表示仅 md 文件适用以下规则
    max_line_length = off
    trim_trailing_whitespace = false
    

    2.使用prettier工具

    Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。

    VSCode需要安装 prettier 的插件
    在这里插入图片描述

    1.安装prettier

    npm install prettier -D
    

    2.创建 .prettierrc 文件

    {
      "useTabs": false,
      "tabWidth": 2,
      "printWidth": 80,
      "singleQuote": true,
      "trailingComma": "none",
      "semi": false
    }
    
    • useTabs:使用tab缩进还是空格缩进,选择false;
    • tabWidth:tab是空格的情况下,是几个空格,选择2个;
    • printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
    • singleQuote:使用单引号还是双引号,选择true,使用单引号;
    • trailingComma:在多行输入的尾逗号是否添加,设置为 none
    • semi:语句末尾是否要加分号,默认值true,选择false表示不加;

    3.创建 .prettierignore 忽略文件

    /dist/*
    .local
    .output.js
    /node_modules/**
    
    **/*.svg
    **/*.sh
    
    /public/*
    

    4.可以在package.json中配置一个scripts,方便执行一下脚本就可以对全部文件做格式化

     "prettier": "prettier --write ."
    

    3. 使用ESLint检测

    VSCode需要安装ESLint插件
    在这里插入图片描述
    1.解决eslint和prettier冲突的问题:

    安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装,就不用手动再安装)

    npm i eslint-plugin-prettier eslint-config-prettier -D
    

    添加prettier插件到 .eslintrc.js中: “plugin:prettier/recommended”

      extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint",
        "plugin:prettier/recommended"
      ],
    

    在这里插入图片描述

    重要提示

    1. 如果配置完后,发现保存代码并没有自动格式化,则需要如下设置
      在这里插入图片描述

    2. 在页面代码处,右键,选择"Format Document",然后选择prettier,保存页面,页面代码自动格式化

    展开全文
  • 前端代码规范代码提交规范HTML规范CSS规范JavaScript规范注释命名规范运算符其他:Vue 代码规范常规vuex 代码提交规范 每次提交代码时,commit按规范进行备注,如:本次提交新增了新功能:feat: 新增xx功能 code...
  • 提示:文章写完后,目录可以自动生成,如何生成可参考右边的...旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范。 一、Vue风格指南 1. 必要的 1.1 组件名为多个单词   可以避免跟现有的以及未来的 HT
  • components中的组件文件夹使用PascalCase命名, 组件文件名也是为PascalCase 格式(index.js和index.vue除外) 其他文件夹以kebab-case方式命名 其他文件命名方式以kebab-case方式命名 变量命名 常量命名规范为KEBAB...
  • vue项目代码规范定义在.eslintrc.js文件中(根目录下) 具体规则定义在rules中 将其全部注释
  • 1、html  1)标签尽量不要写行内样式,各个模块之间做好注释 2)超过500行的代码考虑封装 3)自己命名的class尽量跟组件区分:组件是 xx-xx,我们就xxXx 4)尽可能的减少节点,没必要的外层包装能去掉就去掉 5)...
  • Vue项目代码规范

    2020-12-19 15:43:24
    一、UI框架及css预处理器选择1、PC端Vue项目UI框架:ElementUI(优先)、iView2、移动端Vue项目UI框架:mint-ui(优先)、vant3、sass/scss、less、stylus ?????推荐less:less相对比sass更简洁,而stylus的语法灵活性...
  • ​一、命名规范 市面上常用的命名规范: camelCase(小驼峰式命名法 —— 首字母小写) PascalCase(大驼峰式命名法 —— 首字母大写) kebab-case(短横线连接式) Snake(下划线连接式)​ ...
  • Vue前端开发规范

    2020-12-22 22:17:07
    基于Vue官方风格指南整理 一、强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外。 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ....
  • vue代码规范(公司内部使用) UI框架选择 PC端Vue项目UI框架优先选择:Element UI 文件夹、组件命名规范,组件结构规范 文件夹: 1.文件夹名称应统一格式,小驼峰命名,见名思意,其余文件夹名称统一按照项目结构...
  • vue 前端项目创建

    2021-03-12 22:02:30
    一、创建项目vue-admin-template-master 模板放入创建的 VS code 的工作空间。重命名为自己的项目。模块获取方法:关注“Java程序员进阶”,回复 vue-admin-template-master二、修改项目信息修改 package.json 中...
  • 本文仅作日常项目开发中的知识补充,不必按顺序阅读,如果已经知悉,请跳过。 一、命名规范 现有常用的命名规范: camelCase(小驼峰——首字母小写) PsscalCase(大驼峰——首字母大写) kebab-case (短横线连接式)...
  • 为提高团队协作效率,便于后台人员添加功能及前端后期项目有何迭代,以及提高自身代码质量,让大家书写可维护的代码,而不是一次性的代码,让代码能一目了然,业务逻辑实现表达清晰 命名规范 普通变量命名规范 ...
  • 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。...
  • 作者:卡喵妹https://juejin.cn/post/6987349513836953607一、命名规范市面上常用的命名规范:camelCase(小驼峰式命名法 —— 首字母小写)Pa...
  • 1,检查vue的引用链接是否正确,我学习都用这个链接<src=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”> 2,检查标签是否写错,把没有效果的标签屏蔽...5,检查代码逻辑是否出错或者是否符合vue规范 ...
  • Vue前端打包详细流程

    千次阅读 2021-11-15 10:19:16
    前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式 添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令: ①npm run build...
  • 集成editorconfig配置 ...# 代码风格设置 root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格 tabs | space indent_size = 2 # 缩进大小 end_of_line =
  • Vue3项目搭建规范

    2021-12-16 01:49:38
    一. 代码规范1.1 集成editorconfig配置EditorConfig有助于为不同IDE编辑器上维护一致的编码风格安装插件:EditorConfig for VS Code 后会读...
  • Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架,是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中,Vue做为一门技术流行开来,具备了虚拟DOM树,面向组件的开发模式和观察者模式等优点。 ...
  • Vue前端项目架构梳理

    2020-12-20 10:00:00
    Vue前端项目架构梳理后期可以将TypeScript加入到项目来,对参数的数据类型进行更严格的校验。现在主流就 Vue 和 React,Angular也可以看看,因为你在看React+TS的时候,我觉得内容量和坑的个数就挺多的。这里项目用...
  • vue代码生成器

    2021-09-16 11:20:54
    由此,我生出编写根据接口生成前端代码生成器的想法. 因为我司api文档有两种,前端又有vue2+element和vue3+ant+ts两种框架,由此,扩展出三种代码生成器. 思路 前端代码生成器,简单的说: ..
  • Vue 前端代码规范

    2021-07-03 22:10:22
    其他命名---页面名+数据名+外层标签名(input、span...)三、html数据明面格式四、备注规范 一、文件夹及其文件命名 名称 用途 common 存放国际化字典 pages 存放所有的页面及其子页面在子文件夹中存放...
  • vue 前端项目总结下

    2021-05-04 19:12:05
    首先是用的Vue框架进行组件化开发,Element框架支撑,js,css,html的代码逻辑通过ajax进行接口的请求调用,达到获取服务器数据的目的。再完美的渲染的页面。 项目前(定制开发规范) 团队协作/开发 规范/统一...
  • vue3项目搭建规范

    2021-10-19 19:42:39
    代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = ...
  • vue 项目工程化规范

    2020-12-23 09:51:09
    前言在一个团队中,一般会同时有多个项目在开发,我们除了要开发自己主要负责的项目,偶尔也...那么我们对于采用vue技术栈的项目发现有一些可以改进和规范的地方,如:文件命名不规范,开发目录结构不统一等。目的统...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,200
精华内容 10,080
关键字:

vue前端项目的代码规范

vue 订阅