封装Vue.js组件库

作者: lowpoint | 来源:发表于2022-01-04 20:58 被阅读0次

vue-schart ： vue.js 的图表组件
封装Vue.js组件库
Vue初探--组件化篇
vue学习回顾第三天
Vue - Component组件
vue.js父组件如何触发子组件中的方法
vue全局组件
vue 组件（上篇）
Vue组件,动画,路由 ----Q17
VUE组件化开发

处理组件的边界情况

$root
$parent
$children
$refs
依赖注入 provide / inject
$attrs
- 把父组件中非 prop 属性绑定到内部组件
$listeners
- 把父组件中的DOM对象的原生事件绑定到内部组件

从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部最外层标签上，如果是class和style的话，会合并最外层标签的class 和 style
如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承然后通过 v-bind="$attrs" 把外部传入的非 prop属性设置给希望的标签上，不会改变class和style

快速原型开发

VueCLI 中提供了一个插件可以进行原型快速开发
需要先额外安装一个全局的扩展
- npm install -g @vue/cli-service-global
使用 vue serve 快速查看组件的运行效果

vue serve

vue serve 如果不指定参数默认会在当前目录找以下的入口文件
- main.js ，index.js，App.vue, app.vue
可以指定要加载的组件
- vue serve ./src/login.vue

快速原型开发 - ElementUI

安装 ElementUI

初始化 package.json
- npm init -y
安装 ElementUI
- vue add element
加载 ElementUI，使用 Vue.use() 安装插件

组件分类

第三方组件
基础组件
业务组件

两种项目的组织方式

Multirepo(Multiple Repository)
- 每一个包对应一个项目
Monorepo（Monolithic Repository）
- 一个项目仓库中管理多个模块/包
  - 项目中有一个packages 文件夹，文件夹中所有文件都是一个包，每个包就是一个组件。
    
    Monorepo目录结构.png

Storybook

可视化的组件展示平台
在隔离的开发环境中，以交互式的方式展示组件
在主程序之外运行，独立开发组件
支持的框架
- React,React Native,Vue,Angular,Ember,HTML,Svelte,Mithril,Riot

Storybook 安装

自动安装
- npx -p @storybook/cli sb init --type vue (在当前已有的项目中创建在空项目中 --type vue 强制使用vue)
- yarn add vue
- vue yarn add vue vue-loader vue-template-compiler --dev

npx -p @storybook/cli sb init --type vue安装过程中出现以下报错

图片.png

这里可能有两种情况
1、npm的版本过低
输入npm install -g install 对版本进行更新

npm 无法更新可能与node版本不匹配，npm用的还是原来的，在c盘 user下找到npm，npm-cache两个文件将其删除后重新执行npm install -g install 便可

2、node_cache的路径中带有空格
输入npm config list查看cache路径

输入npm config set cache “D:\Nodejs\node_cache" 把cache的路径指定到"D:\Nodejs\node_cache”，这里的路径是自定义的，不包含空格即可以

storybook-demo代码地址

yarn workspaces 工作区

图片.png
packages下不同的组件中可能依赖不同的第三方包，也有可能几个依赖同一个包，如果各自安装会出现重复下载相同依赖的情况，使用yarn workspaces不同组件依赖相同包只会下载一次并且将依赖包提升到根目录中的node_modules中
开启yarn的工作区

"private":true, //提交github或者发布到npm时，禁止把当前根目录的内容进行提交
"workspaces":[ //设置工作区的子目录 packages目录下
  "packages/*"
]

开启 yarn workspaces 使用

给工作区根目录安装开发依赖 -D(开发依赖) -W(工作区) 安装到工作区根目录
- yarn add jest -D -W
给指定工作区安装依赖 my-button（包对应的package.json 中的name）
- yarn workspace my-button add loadsh@4
给所有的工作区安装依赖
- yarn install

Lerna

Lerna 是一个优化使用 git 和 npm 管理多包仓库的工作流工具
用于管理具有多个包的 JavaScript 项目
它可以一键把代码提交到 git 和 npm 仓库

Lerna使用

全局安装
- yarn global add lerna
初始化
- lerna init
发布
- lerna publish

图片.png

script命令中配置 lerna 命令执行lerna publish 打包发布

1.连接远程仓库
2.登录npm

图片.png

添加自己的npm账号

图片.png
添加完成后 npm whoami 出现npm用户账号此时登录成功
3.npm config get registry 查看当前镜像源是否是npmjs

图片.png

4.yarn lerna 发布

Vue组件的单元测试

单元测试就是对一个函数的输入和输出进行测试，使用断言的方式输入对应的值对输出的值进行判定实际的输出与预测输出是否相同
对组件的各种状态，行为进行测试
组件单元测试好处
提供描述组件行为的文档
节省手动测试的时间
减少研发新特性时产生的bug
改进设计
促进重构

安装依赖

Vue Test Utils
Jest
vue-jest
babel-jest
安装
- yarn add jest @vue/test-utils vue-jest babel-jest -D -W

配置测试脚本

package.json

"scripts":{
    "test":"jest",
    ...
}

Jest 配置文件

jest.config.js
jest.config.js.png
Babel 配置文件
babel.config.js

module.exports = {
  presets:[
    ['@babel/preset-env']
  ]
}

Babel 桥接

yarn add babel-core@bridge -D -W

** Jest 常用API**

Jest 常用API.png

**Vue Test Utils 常用 API **

Vue Test Utils 常用 API.png

storybook-demo代码地址
具体参考其中input组件

Rollup打包

项目发布之前，对项目打包处理

Rollup 是一个模块打包器
Rollup 支持 Tree-shaking
打包的结果比 Webpack要小
开发框架/组件库的时候使用 Rollup 更合适

安装依赖

Rollup
rollup-plugin-terser //对代码进行压缩
rollup-plugin-vue@5.1.9 //将单文件组件编译成js代码最新版将vue3.0转换在此指定特定版本对vue2.0编译
vue-template-compiler
Rollup配置文件
Rollup配置文件.png

单独包打包，在button包下配置后执行 yarn workspace my-button run build
storybook-demo代码地址
具体参考其中button组件

通过一个命令将所有组件打包

@rollup/plugin-json //让rollup可以把json文件作为模块加载
rollup-plugin-postcss
@rollup/plugin-node-resolve -D -W //打包过程中将依赖的第三方包打包进来

设置环境变量

yarn add cross-env -D -W
package.json

"scripts": {
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lerna": "lerna publish",
    "build": "rollup -c",
    "build:prod":"corss-env NODE_ENV=production rollup -c", //生产环境打包
    "build:dev":"corss-env NODE_ENV=development rollup -c" //开发环境打包
  }

生产环境打包后的代码是压缩后的代码

清理

清楚所有组件包中的node_modules，使用lerna clean清除
配置script

"scripts": {
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lerna": "lerna publish",
    "build:prod":"corss-env NODE_ENV=production rollup -c",
    "build:dev":"corss-env NODE_ENV=development rollup -c",
    "clean": "lerna clean"
  },

yarn clean

清理dist
使用第三方 rimraf

yarn add rimraf -D -W
每个包下得package.json 中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c",
    "del": "rimraf dist"
  },

yarn workspaces run del
运行所有包中的del命令

基于模板生成组件的基本结构

使用Plop构建模板文件

yarn add plop -W -D
storybook-demo代码地址
具体参考其中plop-template文件

配置plopfile.js

package.json 配置plop命令

"scripts": {
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lerna": "lerna publish",
    "build:prod": "corss-env NODE_ENV=production rollup -c",
    "build:dev": "corss-env NODE_ENV=development rollup -c",
    "clean": "lerna clean",
    "plop":"plop"
  },

yarn plop
输入创建组件名生成模板

web components 一个示例（与以上无关在此记录下）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web components</title>
</head>
<body>
  <input is="my-input"></body>
  <my-custom></my-custom>
  <script>

    customElements.define('my-input',class extends HTMLInputElement{
      constructor(){
        super()
        this.placeholder = 'myinput'
      }
    },{extends:'input'})

    customElements.define('my-custom',class extends HTMLElement {
      constructor(){
        super()
        console.log(this) //<my-custom></my-custom>
        this.innerHTML = 'abc'
      }

      static observedAttributes = ['color'] //相当于vue data

      connectedCallback(){//相当于mounted

      }

      disconnectedCallback(){//相当于vue的unmounted

      }
      
      adoptedCallBack(){//当组件被收养，即剪切 document.adoptNode()
        
      }

      attributeChangedCallback(name,oldvalue,newvalue){//属性变化触发
        if(name === 'color'){
          this.style.color = newvalue
        }
      }


    })

    customElements.get('my-custom') //返回它的类

    //customElements.whenDefined返回一个promise
    customElements.whenDefined('my-custom').then(()=>{

    }).catch(err=>{

    })

    customElements.upgrade('my-custom')


  </script>
</body>
</html>

网友评论

本文标题：封装Vue.js组件库

本文链接：https://www.haomeiwen.com/subject/mdaqcrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

封装Vue.js组件库

处理组件的边界情况

快速原型开发

快速原型开发 - ElementUI

组件分类

两种项目的组织方式

Storybook

yarn workspaces 工作区

Lerna

Vue组件的单元测试

Rollup打包

设置环境变量

清理

基于模板生成组件的基本结构

web components 一个示例（与以上无关在此记录下）

相关文章

vue-schart ： vue.js 的图表组件