前言

记录Vue的一些常用操作

安装与卸载

卸载vue cli

正确方式如下(视情况加sudo)，而非网上大多人说的 npm uninstall vue-cli -g

1
npm uninstall -g @vue/cli

安装vue cli

1
npm install -g @vue/cli

npm install时的常见报错

1
Unexpected end of JSON input

我的解决方法均是通过清缓存解决，清一次不行，那就多清三五次

1
npm cache clean --force

编写项目代码步骤

  • cd到想要创建项目的目录
  • 键入vue ui 命令，通过vue cli可视化界面创建项目
  • 输入项目名称，如果有预设（babel + eslint + router + vuex）则直接使用预设，如果没有则使用手动，勾选上述列举
  • 一路确定，等待项目创建完成
  • vscode打开项目，终端输入npm run serve 能够运行，则说明项目创建成功

常用代码

  1. 两到三个公用的界面，最好封装为组件，简化代码

  2. 组件使用

    • 在传动态参数时，prop前面加冒号:，传固定值时不加

    • 组件有事件传递时，使用emit传递回父组件，父组件用v-on:组件传递过来的事件名="父组件接收的事件名"来接收

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      // 组件事件传递方式
      // param为参数
      // clickEvent为父组件接收的事件名
      clickEvent (param) {
        this.$emit('clickEvent', param)
      }

      // 父组件接收事件方式（假设组件名为component1）
      // 使用v-on接收，clickEvent为子组件传过来的事件名，noticeClick为父组件实际处理事件的方法名
      <component1 v-on:clickEvent="noticeClick" />
        
      // 父组件具体实现子组件事件的地方
      noticeClick (param) {
        // ...
      }

  3. 必须要计算好单个页面的高度，否则会影响如Vant组件的上拉下拉效果，滚动条显示等，具体参照西北项目

  4. CSS样式，基本上flex和grid可以搞定大部分情况，可参照收藏的掘金文章多熟悉

  5. Vant目前修改其组件内部样式是用的::v-deep .vant的class名(通过Chrome调试查看)

  6. 路由传参与接收

    1
    2
    3
    4
    // 传值
    // name: 路由名
    // params: 所传参数，object（字典）类型
    this.$router.push({ name: 'tododetail', params: { id: id, type: pType } })
    1
    2
    3
    4
    // 接收传值
    // 通过当前路由route获取params中的参数
    // xx为传值过来中object中的具体参数字段
    this.$route.params.xx

  7. 项目配置

    • 网络请求跨域
    • 屏幕适配
    • 公共样式导入
    • …

注意事项

  • 调用data或者方法，一定要记得写this. 不然起不了作用很难发现问题😂

  • JS字符串中使用变量

    1
    var strWithVar = `some string ${var}` // 外边包含的是``，不是单引号

常见问题

  • 网络请求返回数据正确，但是HTML标签赋值却没值。
    • 问题：检查数据是否有多层嵌套如data.xx.yy.zz，可能是VUE不够智能，它可能不能获取较深层的数据，一般最多两层。
    • 解决：用一个新的变量接收
  • Uncaught TypeError: Cannot read property ‘substring‘ of undefined相关
    • 问题：一般为调用如substring等方法的字段未undefined，所以整体也会报undefined
    • 解决：对不能自动处理undefined的字段进行判断，null判断，undefined等判断
  • van-overlay不能拖动滚动
    • 解决：vant版本太低，需要升级到2.6.2以上，设置:lock-scroll=false
  • 纯数字或纯字母不换行
    • 问题：被认为是一个数字（纯数字）或者一个单词（纯字母）
    • 解决：CSS样式加上 word-break: break-all
  • 传参prop值变化，但是组件显示没变
    • 问题：组件绑定的是data的值
    • 解决，将data绑定改为computed
  • Vue默认创建的项目，布局在手机上从状态栏下面开始
    • 解决：在public/index.html中对应viewport的meta标签加上viewport-fit=cover，确保视图缩放填充整个屏幕

待深入

  • 移动端页面滚动条&高度一次性配置方案