如何基于vue开发ui组件库(heaven-ui)

前⾔

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

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

组件库官⽹

github地址

npm地址

⼀、技术栈

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

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

升级webpack 5实战

升级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初体验

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

vite 是什么

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

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

Vite介绍

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

reduce的原生写法

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

特点:
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

作用: 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的原生写法

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);
}
}

css3奇偶选择

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

: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;}
  
 css

Vue组件间的通信方式

方法一、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

当使用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
);

:D 一言句子获取中...