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

时间 2019-12-07

标签前端之路漫漫第二周繁體版

原文原文链接

引言

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

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

项目简介

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

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. 具名插槽的使用

能够用来放弹框的触发器，这样弹框全部的逻辑均可以写在弹框组件里面。html

<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框上绑定一个事件用来触发对应的弹框（咱们的弹框逻辑都封装在弹框组件里面了，因此须要从父组件触发子组件的）vue

<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 错误，若是非要改能够写在一个函数里，而后在计算属性里调用该函数。java

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

1. computed设置set和get

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

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

若是想要监测到对象的改变，那么向对象写入/修改数据时必定要用Vue.set。缘由以下： node

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

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

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

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

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