vue开发如何提高效率? | 牛气冲天新年征文__Vue.js
发布于 2 个月前 作者 banyungong 357 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: healer-readable highlight:

引言

鹅…这边文章适合1-3年经验的小伙伴,也特别适合在小城市或者小公司,开发团队体系不健全的小伙伴~~

何为开发效率高?

个人觉得有几点可以说明效率高(建立的前提,团队不是特别内卷)

  • 组长:速度可以啊
  • 任务分配给你,可以在指定日期之前完成(有时间摸鱼)
  • 同行:做的挺快啊

别人的赞许是对你最大的肯定,那如果是那种需求做不完,做完在给需求的那种,没有限定任务的,那就和同行比较,问问小伙伴的进度,领先他也能反面衬托你的开发效率。那如果就一个人呢???emm那就和后端大哥开接口比速度吧,领先他,数据自己造假,后面对字段的事~

如何提高开发效率?

  • 少写重复的代码
  • 熟悉项目文件,合理命名文件
  • 模块功能合理的实现
  • 写之前先有一段构思的过程,把细节点想到
  • 定下目标完成哪些部分
  • 开发时不听音乐,多喝热水

如何少些重复的代码?

大多数项目会使用到列表的功能,那么列表的增删改查逻辑的代码复用就很有必要,可以添加列表的mixin封装curd操作

export default {
  data() {
    /* eslint-disable */
    return {
      // 设置属性
      mixinViewModuleOptions: {
        createdIsNeed: true, // 此页面是否在创建时,调用查询数据列表接口?
        activatedIsNeed: true, // 此页面是否在激活(进入)时,调用查询数据列表接口?
        getDataListURL: '', // 数据列表接口,API地址
        getDataListIsPage: true, // 数据列表接口,是否需要分页?
        deleteURL: '', // 删除接口,API地址  state 值改为2
        deleteIsBatch: false, // 删除接口,是否需要批量?
        deleteIsBatchKey: 'id', // 删除接口,批量状态下由那个key进行标记操作?比如:pid,uid...
        exportURL: '' // 导出接口,API地址
      },
      // 默认属性
      dataForm: {}, // 查询条件
      dataList: [], // 数据列表
      order: '', // 排序,asc/desc
      orderField: '', // 排序,字段
      page: 1, // 当前页码
      limit: 4, // 每页数
      total: 0, // 总条数
      dataListLoading: false, // 数据列表,loading状态
      dataListSelections: [], // 数据列表,多选项
      addOrUpdateVisible: false // 新增/更新,弹窗visible状态
    }
    /* eslint-enable */
  },
  created() {
    if (this.mixinViewModuleOptions.createdIsNeed) {
      this.query()
    }
  },
  activated() {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
      this.query()
    }
  },
  methods: {
    // 对于返回的数据的操作
    filterData(data) {
      return data
    },
    // 在查询之前查询的字段需要的操作
    beforeQuery(data) {},
    // 获取数据列表
    query() {
      let dataForm = { ...this.dataForm }
      this.beforeQuery(dataForm)
      for (let val in dataForm) {
        if (dataForm[val] === '') {
          dataForm[val] = null
        }
      }
      this.dataListLoading = true
      this.$http
        .post(this.mixinViewModuleOptions.getDataListURL, {
          pageNum: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
          pageSize: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
          ...dataForm
        })
        .then(res => {
          this.dataListLoading = false
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          var data = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
          this.dataList = this.filterData(data)
          this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    // 多选
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 排序
    dataListSortChangeHandle(data) {
      if (!data.order || !data.prop) {
        this.order = ''
        this.orderField = ''
        return false
      }
      this.order = data.order.replace(/ending$/, '')
      this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
      this.query()
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.page = 1
      this.limit = val
      this.query()
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.page = val
      this.query()
    },
    getDataList: function() {
      this.page = 1
      this.query()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    // 删除
    deleteHandle(row, text) {
      this.$confirm({
        title: this.$defaultSettings.title,
        content: h => {
          return <div style="color:red;">{text || '确定要删除该数据?'}</div>
        },
        onOk: () => {
          let _row = JSON.parse(JSON.stringify(row))
          _row.state = 2
          this.$http
            .post(`${this.mixinViewModuleOptions.deleteURL}`, _row)
            .then(res => {
              if (res.code !== 200) {
                return this.$message.error(res.msg)
              }
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.query()
            })
            .catch(() => {})
        },
        onCancel() {},
        class: 'test'
      })
    },

    // post==》导出excel
    downloadExcelUrl(res, name) {
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据
      const fileName = name + '.xlsx' // 导出文件名
      const elink = document.createElement('a') // 创建a标签
      elink.download = fileName // a标签添加属性
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click() // 执行下载
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink) // 释放标签
    }
  }
}

实际可以运用到项目中的项目中直接引入,因为我们项目的个性化,比如删除是改变一个值的状态,值为null的数据在视图显示的时候为“–”等等,所以增加了一些转换例如filterData,beforeQuery等自己的方法,可以根据项目需求调整对应的解决方案。 这里拿antd ui 举🌰,配置好column和api,即可完成对应的业务操作 个人觉得较好得命名规范是 例如用户管理

  • sys-user-list (用户列表)
  • sys-user-detail(用户详细数据)
  • sys-user-add-or-upd(包含用户新增和修改的弹窗)
  • sys-user-avatar-cut-and-upload(用户头像上传裁剪等)

模块功能合理实现

时间允许的情况下可以开发前做一些思维导图

定下目标完成哪些部分

可以定今天完成哪些,比如上午1-2小时完成构思和功能搭建,下午4小时写页面写逻辑,对接口,在考虑细节,划下水,在保证项目进度的情况下划下水也是可以的

不听音乐,多喝热水

可能很多人喜欢听音乐,这个只是我个人的小意见,至少在听到不喜欢的歌会点击在切歌把~~~全神贯注的开发事半功倍(可能平时是我听歌听腻了),热水嘛~神器懂得都懂,女生要多喝,砸门男孩子也不能输orz

最后的最后的安利

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 咕咕茶 原文链接:https://juejin.im/post/6929506986182590477

回到顶部