基于rollup + typescript开发vue组件，可使用ts装饰器

支持多入口操作，支持 typescirpt 装饰器模式，config 里面 output.format 使用 umd 模式不支持代码分割，单一文件入口建议 umd 模式
需要官方文档移步 rollup文档

rollup.config.js

import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import { uglify } from 'rollup-plugin-uglify'
import vuePlugin from 'rollup-plugin-vue'
import less from 'rollup-plugin-less'
import typescript from 'rollup-plugin-typescript2'
const resolveFile = name => path.resolve(__dirname, name)
const extensions = ['.js', '.ts', '.tsx', '.vue']

// ts
const tsPlugin = typescript({
  tsconfig: resolveFile('./tsconfig.json'), // 本地ts配置
  extensions
})

export default {
  input: [
    'src/vue-tree-in-select/index.js'
  ],
  output: {
    dir: 'dist/vue-tree-in-select/',
    name: 'vue-tree-in-select',
    exports: 'named',
    format: 'umd' // cjs amd 可用
  },
  plugins: [
    tsPlugin,
    resolve(extensions),
    commonjs(),
    uglify(), // 压缩代码
    vuePlugin({
      exposeFilename: false,
      target: 'browser'
    }),
    less({
      output: 'dist/vue-tree-in-select/index.css'
    }), // less编译
    babel({
      exclude: 'node_modules/**', // 只编译源代码
      extensions,
      runtimeHelpers: true,
      presets: [
        "@babel/preset-env",
        "@babel/preset-typescript",
      ],
      plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ["@babel/plugin-transform-runtime"]
      ]
    })
  ]
}

package.json

{
  //...,
  "scripts": {
    "dev": "rollup -c ./rollup.config.js -w",
    "build": "rollup -c ./rollup.config.js"
  },
  "dependencies": {
    "tslib": "^1.10.0",
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@umijs/fabric": "^2.5.7",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.7",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-import": "^1.12.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "rollup": "^2.35.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-less": "^1.1.3",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-typescript2": "^0.29.0",
    "rollup-plugin-uglify": "^6.0.4",
    "rollup-plugin-vue": "^5.0.0",
    "typescript": "^3.4.5",
    "vue-template-compiler": "^2.6.12"
  },
  //...
}

入口test.ts

import { Greeter } from './modules';
var cube = new Greeter('cube')
var doIt = cube.greet()

modules.ts

function DemoClassDecorator(target: Function) {
  target.prototype.xname = 'decorator'
  Object.seal(target);
}

@DemoClassDecorator
export class Greeter {
  greeting: string;
  xname!: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet(): string {
    return 'Hello, ' + this.greeting;
  }
}

入口vue-demo

<template>
  <div class="demo_page">
    <Child />
    <ul class="item_list">
      <li class="item" @click="onItemClick">name</li>
    </ul>
  </div>
</template>

<script>
import Child from './child.vue'
import { ref } from 'vue'
export default {
  inheritAttrs: false,
  components: { Child },
  setup(_props, { emit }) {
    const kidRef = ref()
    const onItemClick = () => {
      emit('onClick', { action: 'clicked' })
    }
    return {
      kidRef,
      onItemClick
    }
  }
}
</script>

<style lang="less">
.item_list {
  list-style: none;
  font-size: 14px;
  color: #333;
  .item:nth-child(2n-1) {
    background: #f9f9f9;
  }
}
</style>

命令

npm run build，可以看到dist中打包出三个文件 index.js，test.js，vue-demo.css
npm run dev，监听源文件修改并打包
另外推荐 el-admin-table，基于 Vue2.x + ElementUI 封装的 table/pagination/form 多合一组件