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

引言

這周主要記錄在項目的第一個Sprint週期內遇到的一些問題以及解決的方法。主要包括如下問題：

• vue-cli3的配置（svg-icon, eslint, stylelint）
• 具名插槽的使用
• 如何從父組件觸發子組件方法
• computed的no-side-effects-in-computed-properties問題
• input和vuex數據的雙向綁定（包括對對象數據改變的檢測）
• 父組件向監聽函數傳參

項目簡介

咱們小組如今的項目是一個訂會議室的網頁，項目基於vue開發，用vue-cli3搭建，用vuex進行數據的管理。由於我是小白，請你們主要看思想不要在乎代碼細節（我知道強迫症看着代碼會想改的）。若是有更好的解決方法歡迎大佬們在評論區進行指導，感激涕零！！！

1、 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源碼
    ]
  }
}
複製代碼

2、 彈框問題

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是子組件的方法
複製代碼

3、 計算屬性computed的使用問題

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

不要在計算屬性內直接修改data裏面的數據，eslint會報 no-side-effects-in-computed-properties 錯誤，若是非要改能夠寫在一個函數裏，而後在計算屬性裏調用該函數。

4、 input和vuex數據的雙向綁定

1. computed設置set和get

• set裏面調用vuex mutations的方法寫入數據
• get裏面讀取vuex相應的數據

2. Vue.set解決對象監測問題

若是想要監測到對象的改變，那麼向對象寫入/修改數據時必定要用Vue.set。緣由以下：

我真是翻了好多博客甚至去看了源碼後來才發現就在官網教程的最下面有解釋，這說明再不耐煩也要把教程仔細過一遍，否則遇到問題解決起來用的時間更長T^T

5、 父組件向監聽函數傳參

簡單解釋就是，父組件在監聽子組件的事件時也能夠向下傳遞參數。

<app-check-group :list="list" @change="handleChange($event, index)"/>
複製代碼

• $event： 是子組件傳上來的參數
• index: 是父組件傳遞到方法裏面的參數