# vue-cafeui

> ## 安装 ``` npm install vue-cafeui --save ``` ## 使用

Latest version **0.1.6** (published 2023-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-cafeui
pnpm add vue-cafeui
yarn add vue-cafeui
bun add vue-cafeui
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2023-09-07 |
| First published | 2023-09-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 182.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 0cafe |
| Maintainers | 0cafe |

## Links

- npm: https://www.npmjs.com/package/vue-cafeui
- Repository: https://gitee.com/cafe0/vue-caef-cmp
- npm.io page: https://npm.io/package/vue-cafeui

## Recent versions

- 0.1.6 (latest) — 2023-09-07
- 0.1.5 — 2023-09-07
- 0.1.4 — 2023-09-06
- 0.1.2 — 2023-09-06
- 0.1.1 — 2023-09-06

## README

# vue-cafeui

## 安装
```
npm install vue-cafeui --save
```
## 使用

### 按需引入
```
import {CafeButton} from 'vue-cafeui'
```

### 全局注册
```
import vueCafeui from 'vue-cafeui'
Vue.use(vueCafeui)
```

## npm包发布流程
1. 执行打包命令输出库umd文件
```
npm run lib
```
2. git提交代码
3. 使用npm version命令来更新版本号，并提供更新信息。
```
npm version patch -m "Fix a bug"
```
4. 发布
```
npm publish
```

## vue组件项目搭建
1. 使用vue-cli快速搭建一个vue2.x项目。
2. 修改vue.config.js文件配置。
```
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  configureWebpack: {
    output: {
      library: 'vue-cafeui', // 这里是你的组件库名称
      libraryTarget: 'umd',
      libraryExport: 'default',
    },
  },
  css: {
    extract: false // 禁用样式提取, 否则打包完组件以后会自动分离出css文件需要再引入一个css文件，大项目适合分离，这里是个demo就不分离了
  }
})

```
3. 创建一个lib文件夹用来存放打包后的js文件。
4. 修改package.json文件设置入口文件为打包后的js文件。
```
{ 
    "main": "lib/vue-cafeui.umd.min.js",
}
```
5. package.json里增加一个打包指令：
```
 "lib": "vue-cli-service build --target lib --name vue-cafeui --dest lib src/packages/index.js"
```
6. 创建打包入口文件src/packages/index.js。
```
import CafeButton from '@/components/CafeButton.vue';
import CafeTitle from '@/components/CafeTitle.vue';

export const components = [
    CafeButton,
    CafeTitle
]

const install = (Vue) => {
    Object.values(components).forEach((component) => {
        Vue.component(component.name, component);
    });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    install,
    CafeButton,
    CafeTitle
}
```

### 额外说明
1. package.json中的运行时依赖这里我全部去掉了，因为使用的是打包后的umd.js文件。把原本有的vue和core-js依赖放到了devDependencies中。
2. 有关依赖可以看看peerDependencies

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