封装Vue.js组件库

2022-01-04  本文已影响0人  lowpoint

处理组件的边界情况

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

快速原型开发

vue serve

快速原型开发 - ElementUI

安装 ElementUI

组件分类

两种项目的组织方式

Storybook

Storybook 安装

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


图片.png

这里可能有两种情况
1、npm的版本过低
输入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 使用

Lerna

Lerna使用

图片.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组件的单元测试

安装依赖

配置测试脚本

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

Jest 配置文件

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

Babel 桥接

** Jest 常用API**


Jest 常用API.png

**Vue Test Utils 常用 API **


Vue Test Utils 常用 API.png

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

Rollup打包

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

安装依赖

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

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

设置环境变量

"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" //开发环境打包
  }

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

清理

"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

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

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

使用Plop构建模板文件

配置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"
  },

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>
上一篇 下一篇

猜你喜欢

热点阅读