npm package: @jk998/peace-bu-component
Description: 健康科技集团 - 智药云 - 业务组件库
Latest version: 0.1.1

# @jk998/peace-bu-component

健康科技集团 - 智药云 - 业务组件库

# 使用说明

1，安装

```
yarn add @jk998/peace-bu-component
```

2，使用

```JavaScript
import PeaceBuCompnent from '@jk998/peace-bu-component/dist/index.js'
import '@jk998/peace-bu-component/dist/style/index.css'
Vue.use(PeaceBuCompnent)
```

# 更新记录

## [0.1.1] - 2021-07-20

- 🐛 移除 demo 中，影响全局的样式

## [0.1.0] - 2021-07-20

- 🔥 发布首个公开版本，以 vue-cli 为模板，以项目的形式，开发组件库
- 🔥 支持按需加载
- 🔥 支持热加载
- 🔥 支持 iconfont
- 🔥 支持 sass、less 等预处理器

# 开发、发布组件

1，在 packages 目录，根据组件名称，以标准目录结构创建文件夹及文件，并保持相同前缀：`peace-bu-`

```
├── packages
    ├── peace-bu-component-name
        ├── src
          ├── index.vue
        ├── index.js
    ├── index.js
```

2，在 packages/peace-bu-component-name/index.js 文件中，以 vue plugin 形式，导出组件

```JavaScript
// peace-bu-component-name/index.js

import component from './src'

component.install = (Vue) => {
  Vue.component(component.name, component)
}

export default component
```

3，在 packages/index.js 中，将组件配置到全局 Componets 变量，并添加导出和默认导出

```JavaScript
import PeaceBuComponentName1 from './peace-bu-component-name1'
import PeaceBuComponentName2 from './peace-bu-component-name1'

const Components = [PeaceBuComponentName1, PeaceBuComponentName2]

const install = (Vue) => {
  if (install.installed) {
    return
  }
  install.installed = true

  Components.forEach((Component) => {
    Vue.use(Component)
  })
}

export {
  install,
  PeaceBuComponentName1,
  PeaceBuComponentName2
}

export default {
  install,
  PeaceBuComponentName1,
  PeaceBuComponentName2
}

```

4，执行 `yarn dev`，验证组件正确性

5，执行 `yarn build`，编译并打包

6，执行 `npm publish`，发布到 npm 仓库

# 注意事项

- 仓库默认将处理所有图片文件为 base64。在图片场景，推荐使用 iconfont，如必须使用图片，务必进行图片压缩，不要使用大图。

- 仓库支持`按需加载`，业务代码的`按需加载`是按照 folder/xx.js 和 folder/style/xx.css 固定目录实现的，因此，`每一个`组件编译时，都必须生成 css 文件(即使组件并不需要 css)。

```JavaScript
<template>
  <div class="demo">
    demo
  </div>
</template>

<script>
export default {
  name: 'PeaceBuDemo'
}
</script>

<style>
/* 请注意 */
/* babel-plugin-import 按需加载是按照指定目录结构引入文件 */
/* 即使组件没有任何样式，也需要创建空的 .css 文件，因此使用一个空样式以生成文件 */
.demo {}
</style>
```

- 仓库排除了常见 UI 库引入，如果使用到对应的组件，需要在业务代码中自行安装依赖

  - `element-ui`

  - `vant`

- 仓库提供 demo ，开发前，请仔细查看 [packages/\$-peace-bu-demo](packages/$-peace-bu-demo/index.js) 示例

# 常见问题

- Q：如何实现组件库按需加载

- A：使用 babel-plugin-import 配置按需加载

  1，安装 babel-plugin-import

  ```
  yarn add babel-plugin-import --dev
  ```

  2，配置 babel.config.js

  ```JavaScript
  module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: [
      [
        'import',
        {
          libraryName: 'PeaceBuComponent',
          libraryDirectory: 'dist',
          // vue-cli 默认配置不支持省略 .css 后缀
          // 因此自定义引入的样式名称（仅仅增加 .css 后缀以识别）
          customStyleName(name) {
            return `@jk998/peace-bu-component/dist/style/${name}.css`
          }
        }
      ]
    ]
  }

  ```

  3，按需引入

  ```JavaScript
  import { $PeaceBuDemo } from '@jk998/peace-bu-component'
  ```

- Q：配置了按需加载，无法全局引入了？

- A：是的，建议二选一，如果配置了按需加载仍要全局引入，import 的时候，需要精准路径

  ```JavaScript
  // 配置了按需加载
  // 全局加载
  import PeaceBuCompnent from '@jk998/peace-bu-component/dist/index.js'
  import '@jk998/peace-bu-component/dist/style/index.css'
  Vue.use(PeaceBuCompnent)
  ```

- Q：如何在开发模式下，快速调试 packages，并支持热加载？

- A：在 [docs-src/index](docs-src/main.js) 下，直接引入 packages

```JavaScript
import PeaceBuCompnent from './../packages'
Vue.use(PeaceBuCompnent)
```

- Q：如何在开发模式下，验证 npm publish 后是否正常？

- A：使用本地包测试安装

  1，删除根目录下的 jk998-peace-bu-component-v0.1.0.tgz（首次执行忽略）

  2，移除 @jk998/peace-bu-component 依赖（首次执行忽略）

  ```
  yarn remove @jk998/peace-bu-component
  ```

  3, 生成本地包，生成 tgz 文件

  ```
  yarn pack
  ```

  4, 安装本地包

  ```
  yarn add ./jk998-peace-bu-component-v0.1.0.tgz
  ```

  5, 在 [docs-src/index](docs-src/main.js) 下，直接引入 packages

  ```JavaScript
  // 全局加载
  import $PeaceBuCompnent from '@jk998/peace-bu-component'
  import '@jk998/peace-bu-component/dist/style/index.css'
  Vue.use($PeaceBuCompnent)
  ```

  ```JavaScript
  // 按需加载
  import { $PeaceBuDemo } from '@jk998/peace-bu-component'
  Vue.use($PeaceBuDemo)
  ```

  6，测试成功后，千万别忘记删除依赖

  ```
  yarn remove @jk998/peace-bu-component
  ```

## Project setup

```

yarn install

```

### Compiles and hot-reloads for development

```

yarn serve

```

### Compiles and minifies for production

```

yarn build

```

### Lints and fixes files

```

yarn lint

```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).