精华内容
下载资源
问答
  • Vue开发规范.docx

    2021-06-09 18:53:41
    vue规范
  • 一般写VUE的代码 VS code本身的格式化工具,并不能识别XXX.vue的文件 所以不能格式化,我们需要安装Vuter,此功能 具有 格式化代码还有代码高亮的功能。 点击格式化文档,指挥把引号改成双引号,并且在末尾加上分号...

    一般写VUE的代码 VS code本身的格式化工具,并不能识别XXX.vue的文件
    所以不能格式化,我们需要安装Vuter,此功能 具有 格式化代码还有代码高亮的功能。

    点击格式化文档,指挥把引号改成双引号,并且在末尾加上分号,并不符合eslint规范。
    在这里插入图片描述
    我们解决的方法是:

    第一步:点左下角设置,点在线服务设置
    在这里插入图片描述

    第二步:点红箭头标记的在这里插入图片描述
    在这里插入图片描述
    然后在点击格式化文档就不会,把单引号变成双引号,也不会在末尾加上分号了。

    我们之前写了一些代码,其中的双引号以及分号和其他一些内容,如果想换成符合 eslint 规范的,重新格式化是不行的,因为 vs code 的格式化工具,虽然不会将单引号转换成双引号,但也不会将双引号转换成单引号,也就是说,其是支持两种引号的。

    但是可以使用 eslint 提供的一个工具,对项目中的所有代码进行格式话,如果你使用 vue/cli 创建的项目,则这个工具已经安装且配置好了
    在这里插入图片描述
    在终端运行: npm run lint 命令,他就会对代码进行整体的检查,然后自动做一些修改,双引号替换成单引号,末尾的分号会去掉。添加一些必要的空格。
    在这里插入图片描述
    npm run lint命令并不全部修改完毕,还需要手动修改一些。就是终端会报一些错误
    在这里插入图片描述
    修改保存以后在终端运行 npm run lint 命令。还会报好多英文的错误。然后具体作为是在项目根目录下新建 .eslintignore 文件,加入如下代码
    在这里插入图片描述
    然后在运行 npm run lint 就不会报错误了。

    到这里这个问题就解决完了。
    看完的点个赞再走吧

    展开全文
  • Vue开发规范

    2018-12-01 10:04:34
    目录 一、文档管理 1 1.1 文档信息 1 1.2 修改记录 1 二、 结构目录 2 ...2、文件格式 3 3、页面中id命名要求 3 4、H5文件内容要求 3 5、JS内容要求 3 4、Css要求 4 5、接口请求 5 5、注释规范 5 6、 拓展 6
  • vue开发规范

    千次阅读 2018-08-13 11:08:38
    组件命名规范 组件名应该始终是多个单词的,根组件 App 除外 命名可遵循以下规则: 1. 有意义的名词、简短、具有可读性 2. 以小写开头,采用短横线分割命名,或者以单词大写开头(PascalCase) 命名,组件名应该以...

    组件命名规范

    组件名应该始终是多个单词的,根组件 App 除外 命名可遵循以下规则:
    1. 有意义的名词、简短、具有可读性
    2. 以小写开头,采用短横线分割命名,或者以单词大写开头(PascalCase) 命名,组件名应该以高级别的单词开头,以描述性的修饰词结尾。
    3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue)
    4. 文件夹命名主要以功能模块代表命名

    反例:

    Vue.component('todo', {
      // ...
    })
    
    export default {
      name: 'Todo',
      // ...
    }

    好例子:

    Vue.component('todo-item', {
      // ...
    })
    
    
    export default {
      name: 'TodoItem',
      // ...
    }

    组建数据

    组件的 data 必须是一个函数。
    当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数。

    注意事项:
    1. 使用 data 里的变量时请先在 data 里面初始化
    2. 不命名多余数据
    3. 表单数据请包裹一层 form


    反例:

    export default {
      data: {
        foo: 'bar'
      }
    }
    

    好例子:

    // In a .vue file
    export default {
      data () {
        return {
          foo: 'bar',
          formName{
              userName:'',
              checkVal:''
          }
        }
      }
    }
    
    
    // 在一个 Vue 的根实例上直接使用对象是可以的,
    // 因为只存在一个这样的实例。
    new Vue({
      data: {
        foo: 'bar',
          formName{
              userName:'',
              checkVal:''
          }
      }
    })
    

    Prop定义

    Prop 定义应该尽量详细。
    在你提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。
    在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。

    我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

    反例:

    // 这样做只有开发原型系统时可以接受
    props: ['status']
    
    

    好例子:

    props: {
      status: String
    }
    
    // 更好的做法!
    props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }
    
    props: {
      greetingText: String
    }
    <WelcomeMessage greeting-text="hi"/>

    为v-for设置键值

    总是用 key 配合 v-for。
    在组件上总是必须用 key 配合 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy),也是一种好的做法。

    反例:

    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ul>

    好例子:

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

    避免 v-if 和 v-for 用在一起

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

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

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

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

    反例:

    <ul>
      <li
        v-for="user in users"
        v-if="user.isActive"
        :key="user.id"
      >
        {{ user.name }}
      </li>
    </ul>
    
    
    <ul>
      <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id"
      >
        {{ user.name }}
      </li>
    </ul>
    

    好例子:

    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id"
      >
        {{ user.name }}
      </li>
    </ul>
    
    
    <ul v-if="shouldShowUsers">
      <li
        v-for="user in users"
        :key="user.id"
      >
        {{ user.name }}
      </li>
    </ul>
    

    为组件样式设置作用域

    对于应用来说,顶级 App 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的。

    这条规则只和单文件组件有关。你不一定要使用 scoped 特性。设置作用域也可以通过 CSS Modules,那是一个基于 class的类似 BEM 的策略,当然你也可以使用其它的库或约定。

    不管怎样,对于组件库,我们应该更倾向于选用基于 class 的策略而不是 scoped 特性。

    这让覆写内部样式更容易:使用了常人可理解的 class 名称且没有太高的选择器优先级,而且不太会导致冲突。

    反例:

    <template>
      <button class="btn btn-close">X</button>
    </template>
    
    <style>
    .btn-close {
      background-color: red;
    }
    </style>

    好例子:

    <template>
      <button class="button button-close">X</button>
    </template>
    
    <!-- 使用 `scoped` 特性 -->
    <style scoped>
    .button {
      border: none;
      border-radius: 2px;
    }
    
    .button-close {
      background-color: red;
    }
    </style>

    自闭合组件 强烈推荐

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

    自闭合组件表示它们不仅没有内容,而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签,你的代码也更简洁。

    不幸的是,HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue
    的模板编译器能够触达的地方,然后再产出符合 DOM 规范的 HTML。

    反例:

    反例
    <!-- 在单文件组件、字符串模板和 JSX 中 -->
    <MyComponent></MyComponent>
    
    <!-- 在 DOM 模板中 -->
    <my-component/>

    好例子

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

    模板中的组件名大小写

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

    PascalCase 相比 kebab-case 有一些优势:

    编辑器可以在模板里自动补全组件名,因为 PascalCase 同样适用于 JavaScript。 视觉上比
    更能够和单个单词的 HTML 元素区别开来,因为前者的不同之处有两个大写字母,后者只有一个横线。
    如果你在模板中使用任何非 Vue 的自定义元素,比如一个 Web Component,PascalCase 确保了你的 Vue
    组件在视觉上仍然是易识别的。 不幸的是,由于 HTML 是大小写不敏感的,在 DOM 模板中必须仍使用 kebab-case。

    还请注意,如果你已经是 kebab-case 的重度用户,那么与 HTML
    保持一致的命名约定且在多个项目中保持相同的大小写规则就可能比上述优势更为重要了。在这些情况下,在所有的地方都使用 kebab-case
    同样是可以接受的。

    反例:

    <!-- 在单文件组件和字符串模板中 -->
    <mycomponent/>
    
    <!-- 在单文件组件和字符串模板中 -->
    <myComponent/>
    
    <!-- 在 DOM 模板中 -->
    <MyComponent></MyComponent>

    好例子:

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

    JS/JSX 中的组件名大小写

    JS/JSX 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。

    反例:

    Vue.component('myComponent', {
      // ...
    })
    
    import myComponent from './MyComponent.vue'
    
    export default {
      name: 'myComponent',
      // ...
    }
    
    export default {
      name: 'my-component',
      // ...
    }

    好例子:

    Vue.component('MyComponent', {
      // ...
    })
    
    Vue.component('my-component', {
      // ...
    })
    
    import MyComponent from './MyComponent.vue'
    
    export default {
      name: 'MyComponent',
      // ...
    }

    多个特性的元素

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

    在 JavaScript 中,用多行分隔对象的多个属性是很常见的最佳实践,因为这样更易读。模板和 JSX 值得我们做相同的考虑。

    反例:

    <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
    
    <MyComponent foo="a" bar="b" baz="c"/>

    好例子:

    <img
      src="https://vuejs.org/images/logo.png"
      alt="Vue Logo"
    >
    <MyComponent
      foo="a"
      bar="b"
      baz="c"
    />

    模板中简单的表达式

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

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

    反例:

    {{
      fullName.split(' ').map(function (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(' ')
      }
    }

    简单的计算属性

    应该把复杂计算属性分割为尽可能多的更简单的属性。

    反例:

    computed: {
      price: function () {
        var basePrice = this.manufactureCost / (1 - this.profitMargin)
        return (
          basePrice -
          basePrice * (this.discountPercent || 0)
        )
      }
    }

    好例子:

    computed: {
      basePrice: function () {
        return this.manufactureCost / (1 - this.profitMargin)
      },
      discount: function () {
        return this.basePrice * (this.discountPercent || 0)
      },
      finalPrice: function () {
        return this.basePrice - this.discount
      }
    }

    带引号的特性值

    非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。

    在 HTML 中不带空格的特性值是可以没有引号的,但这样做常常导致带空格的特征值被回避,导致其可读性变差。

    反例:

    <input type=text>
    
    <AppSidebar :style={width:sidebarWidth+'px'}>

    好例子:

    <input type="text">
    <AppSidebar :style="{ width: sidebarWidth + 'px' }">

    指令缩写

    指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 应该要么都用要么都不用。

    反例:

    <input
      v-bind:value="newTodoText"
      :placeholder="newTodoInstructions"
    >
    
    <input
      v-on:input="onInput"
      @focus="onFocus"
    >

    好例子:

    <input
      :value="newTodoText"
      :placeholder="newTodoInstructions"
    >
    <input
      v-bind:value="newTodoText"
      v-bind:placeholder="newTodoInstructions"
    >
    <input
      @input="onInput"
      @focus="onFocus"
    >
    <input
      v-on:input="onInput"
      v-on:focus="onFocus"
    >

    组件/实例选项中的空行

    你可能想在多个属性之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候。

    当你的组件开始觉得密集或难以阅读时,在多个属性之间添加空行可以让其变得容易。在一些诸如 Vim
    的编辑器里,这样格式化后的选项还能通过键盘被快速导航。

    好例子:

    props: {
      value: {
        type: String,
        required: true
      },
    
      focused: {
        type: Boolean,
        default: false
      },
    
      label: String,
      icon: String
    },
    
    computed: {
      formattedValue: function () {
        // ...
      },
    
      inputClasses: function () {
        // ...
      }
    }
    
    
    // 没有空行在组件易于阅读和导航时也没问题。
    props: {
      value: {
        type: String,
        required: true
      },
      focused: {
        type: Boolean,
        default: false
      },
      label: String,
      icon: String
    },
    computed: {
      formattedValue: function () {
        // ...
      },
      inputClasses: function () {
        // ...
      }
    }

    单文件组件的顶级元素的顺序

    单文件组件应该总是让

    <style>/* ... */</style>
    <script>/* ... */</script>
    <template>...</template>
    
    
    <!-- ComponentA.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>

    好例子:

    <!-- ComponentA.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    
    <!-- ComponentA.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>

    谨慎使用 (有潜在危险的模式)

    没有在 v-if/v-if-else/v-else 中使用 key 谨慎使用 如果一组 v-if + v-else 的元素类型相同,最好使用
    key (比如两个

    元素)。

    默认情况下,Vue 会尽可能高效的更新
    DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的副作用。

    反例:

    <div v-if="error">
      错误:{{ error }}
    </div>
    
    <div v-else>
      {{ results }}
    </div>

    好例子:

    <div
      v-if="error"
      key="search-status"
    >
      错误:{{ error }}
    </div>
    <div
      v-else
      key="search-results"
    >
      {{ results }}
    </div>
    
    
    <p v-if="error">
      错误:{{ error }}
    </p>
    <div v-else>
      {{ results }}
    </div>

    scoped 中的元素选择器

    元素选择器应该避免在 scoped 中出现。

    在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。

    反例:

    <template>
      <button>X</button>
    </template>
    
    <style scoped>
    button {
      background-color: red;
    }
    </style>

    好例子:

    <template>
      <button class="btn btn-close">X</button>
    </template>
    
    <style scoped>
    .btn-close {
      background-color: red;
    }
    </style>

    隐性的父子组件通信

    应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。

    一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下 prop
    的变更或 this.$parent 能够简化两个深度耦合的组件。

    问题在于,这种做法在很多简单的场景下可能会更方便。但请当心,不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。

    反例:

    Vue.component('TodoItem', {
      props: {
        todo: {
          type: Object,
          required: true
        }
      },
      template: '<input v-model="todo.text">'
    })
    Vue.component('TodoItem', {
      props: {
        todo: {
          type: Object,
          required: true
        }
      },
      methods: {removeTodo () {
          var vm = this
          vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
            return todo.id !== vm.todo.id
          })
        }
      },
      template: `
        <span>
          {{ todo.text }}
          <button @click="removeTodo">
            X
          </button>
        </span>
      `
    })

    好例子:

    Vue.component('TodoItem', {
      props: {
        todo: {
          type: Object,
          required: true
        }
      },
      template: `
        <input
          :value="todo.text"
          @input="$emit('input', $event.target.value)"
        >
      `
    })
    Vue.component('TodoItem', {
      props: {
        todo: {
          type: Object,
          required: true
        }
      },
      template: `
        <span>
          {{ todo.text }}
          <button @click="$emit('delete')">
            X
          </button>
        </span>
      `
    })

    非 Flux 的全局状态管理

    应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。

    通过 this.$root 和/或全局事件总线管理状态在很多简单的情况下都是很方便的,但是并不适用于绝大多数的应用。Vuex
    提供的不仅是一个管理状态的中心区域,还是组织、追踪和调试状态变更的好工具。

    反例:

    // main.js
    new Vue({
      data: {
        todos: []
      },
      created: function () {
        this.$on('remove-todo', this.removeTodo)
      },
      methods: {
        removeTodo: function (todo) {
          var todoIdToRemove = todo.id
          this.todos = this.todos.filter(function (todo) {
            return todo.id !== todoIdToRemove
          })
        }
      }
    })

    好例子:

    // store/modules/todos.js
    export default {
      state: {
        list: []
      },
      mutations: {
        REMOVE_TODO (state, todoId) {
          state.list = state.list.filter(todo => todo.id !== todoId)
        }
      },
      actions: {
        removeTodo ({ commit, state }, todo) {
          commit('REMOVE_TODO', todo.id)
        }
      }
    }
    
    <!-- TodoItem.vue -->
    <template>
      <span>
        {{ todo.text }}
        <button @click="removeTodo(todo)">
          X
        </button>
      </span>
    </template>
    
    <script>
    import { mapActions } from 'vuex'
    
    export default {
      props: {
        todo: {
          type: Object,
          required: true
        }
      },
      methods: mapActions(['removeTodo'])
    }
    </script>

    vue 方法放置顺序

    props
    
 data
    
 created
    
 mounted
    
 activited
    
 update
    
 beforeRouteUpdate
    
 metods
    
 filter
    
 computed
    
 watch

    编码规范

    尽量按照ESLint格式要求编写代码

    1.  使用ES6风格编码源码
        定义变量使用let ,定义常量使用const
        使用export ,import 模块化
    2. 组件 props 原子化
        提供默认值
        使用 type 属性校验类型
        使用 props 之前先检查该 prop 是否存在
    3. 避免 this.$parent
    4. 谨慎使用 this.$refs
    5. 无需将 this 赋值给 component 变量
    6. 调试信息console.log() debugger 使用完及时删除
    

    注释规范

    代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。
    以下情况,务必添加注释

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

    展开全文
  • vue项目规范文档

    2019-01-17 15:20:51
    vue项目开发常见规范,可以帮助代码易于阅读,团队合作,提高开发效率,提高个人代码编码规范
  • vue命名规范

    2021-01-10 21:39:54
    命名规范 1.文件夹命名: 只用一个名词、小写 不推荐:kebab-case风格(理论上也可) 2.文件命名 a *.vue 除index.vue之外,其它.vue文件统一用PascalBase风格 b *.js 属于类的.js文件,除index.js外,使用...

    命名规范

    1.文件夹命名:
    只用一个名词、小写

    2.文件命名
    a *.vue 除index.vue之外,其它.vue文件统一用PascalBase风格
    b *.js 属于类的.js文件,除index.js外,使用PascalBase风格
    其它类型的.js文件,使用kebab-case风格
    属于api的,统一加上Api后缀
    c *.css 统一使用kebab-case命名风格
    注:最少两个名词,大驼峰,高级别词在前,描述性词后(SearchInputQuery),

    3.变量、方法命名
    类似以get、post、on等开头,以Data结尾,动宾短语小驼峰,另:不在生命周期方法里写逻辑

    4.props
    声明 prop的时候, 使用驼峰命名(myProps), 模板中使用的时候, 用 - 连接(my-props)

      props: {
        myProps: {}
      }
      <my-component :my-props="abc"></my-component>
    
    展开全文
  • 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 开发规范

    千次阅读 2018-04-08 17:10:36
    Vue组件化开发 单文件系统,样式局部作用域 ...组件命名规范Vue官方文档给予以下说明: 当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母
  • 基本上返回的都是统一处理数据格式的 如果对单个接口来说返回的格式并不能直接应用到组件上,而是需要进行值的转换,你们会怎么写呢?写在单页面内,还是单独写一个js,还是在store文件获取数据进行处理
  • Vue开发规范.pdf

    2021-02-01 16:06:38
    参考阿里巴巴开发规范整理
  • vue eslint 规范配置

    2019-07-31 13:12:00
    为了代码格式统一,避免一些低级或者不合理的错误,现强行使用eslint的 standard规范 项目配置 目前都是使用 vue 提供的脚手架进行开发的,虽然 vue-cli 3.0,但是公司因为配置了OAuth的缘故,暂时还是只能使用vue-...
  • Vue命名规范

    2019-10-04 22:45:33
    views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。 views 下的文件夹命名 views 下面的文件夹代表着模块的名字 由名词组成(car、order、...
  • 前端vue开发规范

    千次阅读 2020-04-14 11:41:23
    vetur:vue插件 HTML CSS Support:HTML和CSS代码提示插件 Past and Indent:粘贴代码正确缩进 Path Intellisense:文件路径提示 3.使用统一缩进,以tab缩进,一个tab大小为2个空格 二、命名规范 1.变量名,文件名...
  • 主要介绍了vscode配置vue下的es6规范自动格式化详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,987
精华内容 17,194
关键字:

vue格式规范

vue 订阅