前⾔

Vue是⼀套⽤于构建⽤户界⾯的渐进式框架,⽬前有越来越多的开发者在学习和使⽤。⽽组件库能帮我们节省开发精⼒，⽆需所有东⻄都从头开始去做，通过⼀个个⼩组件拼接起来，就得到了我们想要的最终⻚⾯。在⽇常开发中如果没有特定的⼀些业务需求，使⽤组件库进⾏开发⽆疑是更便捷⾼效，⽽且质量也相对更⾼的⽅案。

本⽂阐述了如何基于vue⼀步步完成⼀个UI组件库的打造。

组件库官⽹

github地址

npm地址

⼀、技术栈

我们先简单了解⼀下要搭建⼀个 UI 组件库，会涉及到哪些技术栈，下⾯是我选⽤的内容：

1. vue-cli：官⽅⽀持的 CLI 脚⼿架，提供⼀个零配置的现代构建设置；
2. Vue: 渐进式 JavaScript 库；
3. Jest：JavaScript 测试框架，⽤于组件库的单元测试；

升级webpack 5实战

一、背景

本次对公司项目进行webpack的升级 ， 原有版本是webpack4.42.1， 本次升级目标是webpack5.28.0，已经是很新的版本了。目标，升级Webpack5，应用长效缓存，提升构建速度。

二、步骤

按照官网升级文档

“vue-loader”: “^15.9.6”,

“terser-webpack-plugin”: “^5.1.1”,

“style-loader”: “^2.0.0”,

“mini-css-extract-plugin”: “^1.4.0”,

“less-loader”: “^8.0.0”,

“html-webpack-plugin”: “^5.3.1”,

“file-loader”: “^6.2.0”,

“css-loader”: “^5.2.0”,

“compression-webpack-plugin”: “^7.1.2”,

“babel-loader”: “^8.2.2”,

“postcss-loader”: “^5.2.0”,

Vite —— 一种新的、更快地 web 开发工具。

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

1. 1.快速的冷启动
2. 2.即时的模块热更新
3. 3.真正的按需编译

Vite介绍

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。

• 英文文档
• 中文文档
• GitHub

reduce

特点: reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
源码实现

1
2
3
4
5
6
7
8
9
10
11
12
13

Array.prototype.myReduceRight = function(func, init) {
    var prev = init,
        len = this.length,
        k = len - 1; 
    if(init === undefined) {
        prev = this[k];
        k = len - 2;
    }
    for(k; k >= 0; k --) {
        prev = func(prev, this[k], k);
    }
    return prev;
}

map

特点:
map处理return出来的值，把值放在一个新的数组，默认返回undefined。
浅拷贝，会改变原数组。
浅度map实现

1
2
3
4
5
6
7
8

Array.prototype.myMap = function(func) {
    var len = this.length,
        newArr = [];
    for(var i = 0; i < len; i++) {
        newArr.push(func(this[i], i));
    }
    return newArr;
}

filter

作用: filter筛选数组，筛选出新的数组。
特点: 筛选的值由return来决定，会放在一个新的数组中返回。

源码实现

1
2
3
4
5
6
7
8
9
10

Array.prototype.myFilter = function(func) {
  var len = this.length,
      newArr = [];
  for(var i = 0; i < len; i++) {
      if(func(this[i], i)) {
          newArr.push(this[i]);
      }
  }
  return newArr;
}

forEach

作用: 循环遍历数组
特点:
不改变原数组，返回值为undefined。
改变不了数组的遍历(return/break不好使，会报错)

源码实现

1
2
3
4
5
6

Array.prototype.myForEach = function(func) {
  var len = this.length;
  for(var i = 0; i < len; i++) {
      func(this[i], i);
  }
}

第一种：简单数字序号写法

:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 例子：

1
2
3

代码如下:

li:nth-child(3){background:orange;}

第二种：倍数写法

:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。 例子：

1
2
3

代码如下:

li:nth-child(3n){background:orange;}

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1. 父组件向子组件传值
   接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:[“王小虎”,”张三”,”李四”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>

import Users from "./components/Users"

export default {
  name: 'App',
  data(){
    return{
      users:["王小虎","张三","李四"]
    }
  },
  components:{
    "users":Users
  }
}

当使用fetch 发起跨域请求时，CORS（跨域资源共享Cross-origin resource sharing）

请求fetch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const body = {name:"Good boy"};
 fetch("http://leheavengame.com/API",{
     headers:{
         'content-type':'application/json'
     }
     method:'POST',
     body: JSON.stringify(body)
}).then(response =>  
     response.json().then(json => ({ json, response }))
).then(({ json, response }) => {
    if (!response.ok) {
      return Promise.reject(json);
    }
    return json;
}).then(
    response => response,
    error => error
  );