vue实践

vue开发规范

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 传参的回车方式

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

1
2
3
4
5
6
7
8
9
10
// 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
      • 周期钩子
        • 按周期调用

6. 其余的待观察总结

分享
返回顶部