Vue 开发规范

  • Z时代
  • 2024-01-10
  • 分类：综合

0. 遵循的大 JS 规范

遵循 Airbnb 的 eslint 规范

1. 版本选择

  • 选择 vue2.0 最新版本进行开发

  • js版本，选择 es6、7 进行开发，只要 babel 支持转义就 OK

2. 语法规范

  • 无特殊说明的话，vue的命名、缩进，与JS的命名规范一致，遵循Airbnb的eslint规范

2.1 vm 对象

实例化的 vm 对象，统统以 *Vue 来命名，如主界面的 Vue 对象，使用 mainVue

2.2 传参的回车方式

一个参数一个回车，前面对齐

// bad
<li v-for="item in templateList"  @click="chooseModal(item.id,item.activityTypeId)" @mouseenter="mouseoverFun(item.id)" @mouseleave="mouseoutFun">
// good
<li
  v-for="item in templateList"
  @click="chooseModal(item.id,item.activityTypeId)"
  @mouseenter="mouseoverFun(item.id)"
  @mouseleave="mouseoutFun"
>

3. 公用部分

3.1 过滤器编写

通用的过滤器方法，如日期、图片等，写到公用的 commonFilter.js 方法里面，全局引用

单个使用的过滤器方法，放到单独的业务代码之中

3.2 指令编写

类似于过滤器，必要的话，提出公共的来

3.3 static 文件夹

该文件夹只放不能被 webpack 处理的 css 与 JS 文件，如 baseCore.css、modify.css

其余的类似 config.js，需要放到 src 下面，被 webpack 处理

3.4 svg split

公用的一大堆svg元素，不能直接写到 index.html 中，需要处理到单独组件中，保证 index.html 干净

4.插件选择

vue自带的靠谱插件，vue router、vuex、vue resource，其余的，呵呵

4.1 日期插件

选择 my97date，这个可以做双向数据绑定

千万不能使用 laydate，有bug，扩展性也不行

4.2 ajax 插件

vue官方推荐axois，但是这个不支持 jsonp，可以使用 vue resource 来支持 jsonp

4.3 radio 美化插件

自写样式，替代icheck插件，实现双向数据绑定

5. 单文件组件

  • 三大模块顺序 template——script——style，顺序放置

  • 模块直接，保留一个空行

  • 自定义的模块，要放到最后

  • style，要添加 scoped，如果是多处用到的样式，写到 modify.css 里面

  • script里面代码顺序

    • import

    • export

      • name

      • mixins

      • components

      • props

      • data

      • computed

      • watch

      • method

      • 周期钩子

        • 按周期调用

以上是 Vue 开发规范 的全部内容， 来源链接： utcz.com/z/264343.html

回到顶部