前端之路漫漫爬【第二周】

引言

这周主要记录在项目的第一个Sprint周期内遇到的一些问题以及解决的方法。主要包括以下问题：

• vue-cli3的配置（svg-icon, eslint, stylelint）
• 具名插槽的使用
• 如何从父组件触发子组件方法
• computed的no-side-effects-in-computed-properties问题
• input和vuex数据的双向绑定（包括对对象数据改变的检测）
• 父组件向监听函数传参

项目简介

我们小组现在的项目是一个订会议室的网页，项目基于vue开发，用vue-cli3搭建，用vuex进行数据的管理。因为我是小白，请大家主要看思想不要在意代码细节（我知道强迫症看着代码会想改的）。如果有更好的解决方法欢迎大佬们在评论区进行指导，感激不尽！！！

一、 vue-cli3的配置

1. SVG-icon的配置（一定注意路径）

• vue.config.js文件的配置

    // svg sprite loader
    config.module
      .rule('svg')
      .exclude.add(resolve('./src/assets/icons'))
      .end()

    config.module
      .rule('svg-icons')
      .test(/\.svg$/)
      .include.add(resolve('./src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .end()
复制代码

• icon.vue文件的配置

<template>
  <svg class="icon" :class="className">
    <use :xlink:href="href"/>
  </svg>
</template>

<script>
export default {
  name: 'AppIcon',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    className () {
      return `icon-${this.name}`
    },
    href () {
      return `#${this.name}`
    }
  }
}
</script>
复制代码

2. Eslint的配置

• 依赖（都是开发依赖）
  • eslint
  • babel-eslint
  • eslint-plugin-vue
  • @vue/cli-plugin-eslint
  • @vue/eslint-config-standard
• .eslintrc.js 的配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    // Indent 2 spaces
    indent: ['error', 2],
    // Forced use of single quotation marks
    quotes: ['error', 'single'],
    // Force not to use semicolon ending
    semi: ['error', 'never'],

    'vue/max-attributes-per-line': ['error', {
      'singleline': 5,
      'multiline': {
        'max': 1,
        'allowFirstLine': false
      }
    }],

    'vue/html-self-closing': ['error', {
      'html': {
        'void': 'never',
        'normal': 'never',
        'component': 'always'
      },
      'svg': 'always',
      'math': 'always'
    }]
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 6 // support ES6 syntax
  }
}
复制代码

3. Stylint的配置

• 依赖
  • node-sass
  • sass-loader
  • stylelint
  • stylelint-config-recommended-scss
  • stylelint-config-standard
  • stylelint-order
  • stylelint-scss
  • stylelint-webpack-plugin
• vue.config.js 的配置

const StyleLintPlugin = require('stylelint-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    config.plugins.push(
      new StyleLintPlugin({
        files: [
          'src/sass/**/*.scss'
        ],
        fix: true
      })
    )
  }
}
复制代码

• .stylelintrc 的配置

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "color-no-invalid-hex": true,
    "block-no-empty": null,
    "number-leading-zero": "never",
    "at-rule-no-unknown": null,
    "no-descending-specificity",
    "font-family-no-missing-generic-family-keyword":null,
    "order/properties-order": [
        //详细配置见bootstrap源码
    ]
  }
}
复制代码

二、 弹框问题

1. 具名插槽的使用

可以用来放弹框的触发器，这样弹框所有的逻辑都可以写在弹框组件里面。

  <div>
    <div @click="showPanel">
      <slot name="triger"></slot> //用来放触发器的具名插槽
    </div>
    <div class="pop-up" v-show="isPanelShow" @click="hidePanel">
      <div class="pop-up__main" @click.stop>
        <slot>content</slot>
        <div class="pop-up__main-left-btn" @click="hidePanel">{{cancel}}</div>
        <div
          class="pop-up__main-right-btn"
          :class="{ 'pop-up__main-checked': isChecked }"
          @click="clickConfirm"
        >{{confirm}}</div>
      </div>
    </div>
  </div>
复制代码

2. 从父组件触发子组件的方法

因为表单上很多个样式相同的input框（一部分是输入框，一部分点击后是各种不同弹框），不想让代码看着很多就想直接把这些框做一次循环，但是这些input框触发的弹框又不一样，所以想在input框上绑定一个事件用来触发对应的弹框（我们的弹框逻辑都封装在弹框组件里面了，所以需要从父组件触发子组件的）

    <popup-meeting-type ref="meeting-type"/>  //在弹框上增加ref
    this.$refs['meeting-type'].trigger()      //trigger是子组件的方法
复制代码

三、 计算属性computed的使用问题

1. no-side-effects-in-computed-properties

不要在计算属性内直接修改data里面的数据，eslint会报 no-side-effects-in-computed-properties 错误，如果非要改可以写在一个函数里，然后在计算属性里调用该函数。

四、 input和vuex数据的双向绑定

1. computed设置set和get

• set里面调用vuex mutations的方法写入数据
• get里面读取vuex相应的数据

2. Vue.set解决对象监测问题

如果想要监测到对象的改变，那么向对象写入/修改数据时一定要用Vue.set。原因如下：

我真是翻了好多博客甚至去看了源码后来才发现就在官网教程的最下面有解释，这说明再不耐烦也要把教程仔细过一遍，不然遇到问题解决起来用的时间更长T^T

五、 父组件向监听函数传参

简单解释就是，父组件在监听子组件的事件时也可以向下传递参数。

<app-check-group :list="list" @change="handleChange($event, index)"/>
复制代码

• $event： 是子组件传上来的参数
• index: 是父组件传递到方法里面的参数

转载于:https://juejin.im/post/5c03d93f5188257c5237c9aa