使用@vue/cli开发一个typescript通用组件并发布到npm上

1、组件分类的介绍

• 一、通用组件

  • 抽象的UI组件，无具体的实现
  • 使用须要加入具体的业务代码
  • 具备高通用性和可扩展性

• 二、业务组件

  • 平时咱们项目中使用的组件

2、vue中组件的认识

传统的前端开发中是没组件的概念，自从进入了vue、react、angular的时代，才有了组件的说法，具体咱们说的组件说的是什么呢?

就我我的对组件的理解: 咱们说的组件能够理解为一个函数或者说的是类，组件中接收的参数能够理解为是函数的参数,类的构造函数。组件中的this能够泛指就是类的实例

3、初始化空白项目

• 一、首先要安装@vue/cli

• 二、根据官网提供的步骤建立一个typescript的项目连接地址

4、设计一个弹框组件

• 一、弹框组件主要实现功能
  • 用户调用组件,能够打开、关闭弹框
  • 标题的动态传入
  • 内容体的写入
  • 底部按钮文字及显示按钮
  • 按钮触发事件的回调函数
  • 底部是否可见
  • 底部能够根据用户自定义的渲染
  • 是否可拖动

• 二、组件也要能够全局安装

• 三、主要界面展现

  

5、主要代码实现

• 一、组件的代码实现见

• 二、配置打包生成lib命令

  "scripts": {
    "lib": "vue-cli-service build --dest lib --target lib --name maucash-model ./src/packages/index.ts"
  }
  复制代码

• 三、书写types文件

  import Vue from 'vue';
  
  declare function install(vue: typeof Vue): void; declare class MaucashModel extends Vue {}
  
  declare const _default: {
    install: typeof install;
  };
  
  export { MaucashModel };
  
  export default _default;
  复制代码

• 四、在packages.json中配置打包后的引入的目录及typings

  "main": "lib/maucash-model.umd.min.js",
  "typings": "types/index.d.ts",
  复制代码

• 六、在packages.json中配置须要上传到npm的目录文件

  "files": [
    "lib/**/*",
    "types/*"
  ]
  复制代码

6、参考代码

• 源码地址

• npm包地址