• 1.文件命名

    1）Css文件

      style.css放在common目录中将自己页面公共样式提取出来引入APP.vue中

    2）Vue文件

          功能.vue 放于pages目录中以项目中页面对应功能模块起名，如 用户协议页面 userNotice.vue）

    3）js文件

       1) api.js、MinRequest.Js后台接口文件命名 (拦截、返回值以及api命名、请求头请求方法定义等) 
   2) 工具类.js 文件  until 目录 放置一些固定的选择项js以及功能方法.js文件
   3) 公共.js文件    common目录放置 如 图片路径

  • 2.类名命名

      1)字体  
     font-size  形式：“ . + f + 数字” { font-size: 数字+ 单位 !important} 
  2)大小
     Width 形式：“. + wid + 数字” {width:数字+单位 !important}
     Height 形式：“. + hei + 数字” {height:数字+单位 !important}
  3)颜色
  color形式：“ . + color + 色值简写 ”{color: #色值 !important}
  4)边距
    Margin/padding形式：“. + m/p方向大小” 
  例如：.mt10{margin-top:10px;} .pl10{padding-left:10px}
  5)自定义类名
     Class 按照 功能+方向 不使用驼峰命名
     Id 按照 J_驼峰命名

  • 3.页面规范

      1）.vue文件中 

      1.Template 标签 

      页面布局结构 根据官方文档来定义

      2.Script  标签 顺序 
        Data()中的变量放置顺序
          1）图片路径
          2）分页参数
          3）循环数组
          4）自定义变量 
          5）显示隐藏show:true/false  
    框架中的方法
      1）onLoad(data)
      2）onshow()
      3）onPullDownRefresh()
      4）onReachBottom()
      5）等等方法参考对应官网

    methods中自定义的方法
      方法名为：handler +  _  +  功能名字 或者 handler + 功能名字
      1）分页方法 loadData()
      2）获取平台信息方法 
      3）头部导航方法 如 返回 handler_back()
      4）自定义的方法
      5）修改方法
      6）删除方法
      7）详情方法
      8）清空方法
      9）等等其他

  2）.js 文件中
        1.export default 语法导出一个对象或者函数
        2.Main.js  是入口文件new Vue() 挂载vue实例

  3）.css文件中
    一般分为 框架基础样式与自定义样式，引入app.vue文件中

  4) .json文件
      1.Mainfest.json 文件 
      在app模块权限配置需要将相册或者位置等权限勾选 ;源码视图中可代理配置接口地址

      2.Pages.json 文件
      文件中配置页面路由以及tabBar项和全局样式等；

  5）.md 文件
    文件中需要记录每个页面的名称，以便后期同事维护可以找到

-------------- 以下总结是自己对于web前端职业的总结，仅仅是自己的思考 请勿打扰 ---------------------

  • 工作总结
    一、前端主要工作

      1.静态页面
        前端要大于等于Ui设计稿便是优秀网页设计师，视觉交互、兼容性、响应、优化等几个方面将静态页面做到周全便为成为优秀的前端奠定基础了
  2.数据绑定
       接口对接将数据绑定到页面上，考虑所展示的数据结构是否合适展示在页面上。
  3.其他任务
       听公司安排任务

    二、掌握技能

      1.Html +css
  2.Js   es6
  3.Vue
  4.Ui框架
  5.插件

    三、对接人员

    1.后台
2.ui设计师
3.产品
4.移动端
5.测试

    四、交接测试

    接口联调完成之后自测静态页面展示兼容性交接给测试人员

    五、上线完成

    上线之前需要控制图片css等文件的大小，项目结束后总结 该项目开发过程中的问题解决方案经验教训从而提升自己