@jk998/peace-bu-component v0.1.1

@jk998/peace-bu-component

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

使用说明

1，安装

yarn add @jk998/peace-bu-component

2，使用

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 形式，导出组件

// 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 变量，并添加导出和默认导出

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)。

<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 示例

常见问题

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

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

  1，安装 babel-plugin-import

  yarn add babel-plugin-import --dev

  2，配置 babel.config.js

  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，按需引入

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

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

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

  // 配置了按需加载
  // 全局加载
  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 下，直接引入 packages

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 下，直接引入 packages

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

  // 按需加载
  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.