使用@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包地址