Vue 开发经验（已更新）

web项目结构

image.png

2. 常用技巧

1. 页面不需要的字段，全部在 data 的 return 上面定义 this.xxx
2. 页面没有立即需要的字段，数据保存到中间值，待需要的时候再给 data 中数据赋值 （data中值会被一直监控）
3. 组件库按需引入，减少项目代码体积
4. 全局样式前面加 g-xxx
5. 页面看情况拆成组件式开发，并不只是复用，可以减少一个页面的逻辑，可维护性提高 注意：同一个数据通用一个变量维护

3. 代码技巧

1. 写页面样式，可以在谷歌中调试，元素样式边写边看，待到确认可以的时候，直接将样式复制回代码中
2. @click.stop="onResumeProgress" 阻止事件冒泡
3. 父组件传值
   1. 在子组件使用父组件传入的值时，最好复制出一份props的值，通过data或者computed进行赋值。
   2. data赋值：data:{return {aaa: this.aaa}如果是在data中进行赋值，当父组件的aaa值发生改变时，不会在重新赋给子组件中的aaa。
   3. computed赋值：如果想让子组件跟着父组件修改，需要将赋值操作写在computed中。computed:{aaa(){return this.aaa}
4. 定时器创建和清除

onStartTimer() {
  const timer = setInterval( () => {
      // 执行一些操作
  }, 1000)
  this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
  })
}

3. 文件上传格式

（doc）-> application/msword
（docx）-> application/vnd.openxmlformats-officedocument.wordprocessingml.document
（eml）-> message/rfc822
（gif）-> image/gif
（htm）-> text/html
（html）-> text/html
（jpeg）-> image/jpeg
（jpg）-> image/jpeg
（mht）-> multipart/related
（msg）-> 
（pdf）-> application/pdf
（png）-> image/png
（rtf）-> text/rtf
（txt）-> text/plain
（wml）-> 
（wps）-> 
（xhtml）-> application/xhtml+xml
（xls）-> 
（xlsx）-> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
（xml）-> text/xml

web 前端群招人，有梦想的一群小青年 https://www.jianshu.com/p/33eee1c26b8a