keep-models

执行命令

npm login

账号：app_wyz 密码：10个空格 Email: [email protected]

npm publish

一、使用方式

• 1、安装

  npm install keep-models --save

• 2、在项目中的main.js文件中引入

  import Vue from 'vue';
  import KeepModels from 'keep-models';
  import 'keep-models/lib/keep-models.css';
  Vue.use(KeepModels);

  注册后，keep-models内的所有组件都可直接引用

• 3、组件中使用

  <top-header></top-header>

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

二、组件分类的介绍

• 1、通用组件

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

• 2、业务组件

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

三、vue中组件的认识

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

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

四、初始化空白项目

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

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

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

• 3、主要界面展示

五、主要代码实现

• 1、组件的代码实现见

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

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

• 3、书写types文件

  import Vue from 'vue';
  
  declare function install(vue: typeof Vue): void;
  
  declare class TopHeader extends Vue {}
  
  declare const _default: {
    install: typeof install;
  };
  
  export { TopHeader };
  
  export default _default;

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

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

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

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

六、参考代码

• 源码地址

• npm包地址