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

一、组件分类的介绍

• 1、通用组件

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

• 2、业务组件

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

二、vue中组件的认识

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

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

三、初始化空白项目

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

• 2、根据官网提供的步骤创建一个typescript的项目链接地址

四、设计一个弹框组件

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

• 2、组件也要可以全局安装

• 3、主要界面展示
  

五、主要代码实现

• 1、组件的代码实现见

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

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

• 3、书写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;
  

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

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

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

  "files": [
    "lib/**/*",
    "types/*"
  ]
  

六、参考代码

• 源码地址

• npm包地址