# ym-table-tpl

> ```js import 组件名称 from "组件路径";

Latest version **0.0.22** (published 2022-09-14) · 0 weekly downloads

## Install

```sh
npm install ym-table-tpl
pnpm add ym-table-tpl
yarn add ym-table-tpl
bun add ym-table-tpl
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2022-09-14 |
| First published | 2022-09-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 283.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yanmeng2042338 |

## Links

- npm: https://www.npmjs.com/package/ym-table-tpl
- npm.io page: https://npm.io/package/ym-table-tpl

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [sass](https://npm.io/package/sass.md) ^1.54.9
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [node-sass](https://npm.io/package/node-sass.md) ^7.0.3
- [vue-types](https://npm.io/package/vue-types.md) ^4.2.1
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^3.2.12
- [@surely-vue/table](https://npm.io/package/@surely-vue/table.md) ^2.4.9
- [@ant-design/icons-vue](https://npm.io/package/@ant-design/icons-vue.md) ^6.1.0
- [unplugin-vue-components](https://npm.io/package/unplugin-vue-components.md) ^0.22.4

## Recent versions

- 0.0.22 (latest) — 2022-09-14
- 0.0.21 — 2022-09-14
- 0.0.20 — 2022-09-08
- 0.0.19 — 2022-09-08
- 0.0.17 — 2022-09-08
- 0.0.16 — 2022-09-07
- 0.0.15 — 2022-09-07
- 0.0.14 — 2022-09-07
- 0.0.12 — 2022-09-07
- 0.0.11 — 2022-09-07
- 0.0.10 — 2022-09-07
- 0.0.9 — 2022-09-07
- 0.0.8 — 2022-09-07
- 0.0.7 — 2022-09-07
- 0.0.6 — 2022-09-07
- … 5 more at https://npm.io/package/ym-table-tpl/versions

## README

### 导出组件index.js配置
```js
import 组件名称 from "组件路径";

//按需引入
export { 组件名称 };

const components = [组件名称];

const install = (App) => {
  components.forEach((item) => {
    //item.name中的neme取的是组件的name
    App.component(item.name, item);
  });
};

export default {
  install,
};

```
### vite.config.js配置
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from "path";
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    vue(),
    //专门用来解析第三方组件sTable的dom结构
    Components({
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('@surely-vue'))
            return { name: '组件名称', from: '@surely-vue/table' }
        },
      ]
    })
  ],
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, 'package/index.js'),// 设置入口文件
      name: '组件名称',// 起个名字，安装、引入用
      fileName: '打包后的文件名',
    },
    rollupOptions: {
      // 确保外部化处理不想打包进库的依赖
      external: ['vue','@surely-vue/table'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

```
### package.json配置
```json
{
  "name": "制品名称-跟组件name保持一致",
  "private": false,
  "version": "0.0.1",//版本号，每次更新注意修改
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "files": [
    "lib" //打包模式：库模式
  ],
  "main": "lib/入口js名称.umd.cjs", //包函数入口
  "module": "lib/入口js名称.js",//ESM标准入口
  "exports": {
    "./lib/style.css":"./lib/style.css", //导出样式
    ".": {
      //向外暴露的文件 node规范
      "import": "./lib/向外暴露js名称.js",
      "require": "./lib/向外暴露js名称.umd.cjs"
    }
  },
  "dependencies": {
    "@surely-vue/table": "^2.4.9", //s-table
    "unplugin-vue-components": "^0.22.4", //用于解析s-table所必须的
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@types/node": "^18.7.15",
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}
```
### npm publish前请先本地打包

### 使用方式
全局引用：示例（后续正式发布后修改）

```js
import { createApp } from 'vue'
import App from './App.vue'
import tableTpl from 'ym-wd-table'
import 'ym-wd-table/lib/style.css'

createApp(App).use(tableTpl).mount('#app')
```
### wd-table使用说明（demo示例非正式）
| 属性 | 类型 | 说明 |
|---|---|---|
| column | Array | 列定义 |
| dataSource | Array | 行数据 |
| rowSelection | Object | 列表项是否可选择 |

---
_Source: https://npm.io/package/ym-table-tpl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._