hsja-components-lib v0.1.4

引用和维护组件库指南

图表组件库 hsja-components-lib

引入组件库

npm install hsja-components-lib

使用

完整引入

import HsjaComponents from "hsja-components-lib";
Vue.use(HsjaComponents);

按需引入

借助 babel-plugin-component，可以只引入需要的组件，以达到减小项目体积的目的，首先安装 babel-plugin-component。（babel-plugin-import 配置略有不同而且会导致完整引入写法错误，推荐 babel-plugin-component。）

yarn add babel-plugin-component -D / npm install babel-plugin-component -D

然后，在 babel.config.js 中配置（假设原有 element-ui）

plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
      'element-ui',
    ],
    [
      'component',
      { libraryName: 'hsja-components-lib', styleLibraryName: 'theme-chalk' },
      'hsja-components-lib',
    ],
  ],

在 main.js 引入（basic-bar-chart 依赖于 basic-axis-chart和base-chart组件）

import { BaseChart, BasicAxisChart, BasicBarChart } from "hsja-components-lib";

Vue.use(BaseChart);
Vue.use(BasicAxisChart);
Vue.use(BasicBarChart);

增加组件步骤

添加组件

1. 在 packages 中增加组件，文件夹建议串行命名。结构 index.js，src/main.vue，name 大驼峰。样式统一写在packages/theme-chalk/src/xxx.scss。

index.js 写法统一，为了方便按需引入，main.vue 的 name 即为组件名，比如：

import BasicAreaChart from "./src/main.vue";

BasicAreaChart.install = function (Vue) {
  Vue.component(BasicAreaChart.name, BasicAreaChart);
};

export default BasicAreaChart;

在./components.json 中添加对应入口，打包出对应 chunk。

2. 在 src/demo 或其他自定义页面，引用组件，写调试代码，npm run serve 本地调试效果，组件在 packages 添加后会统一全局注册，demo 页直接使用即可。

3. 在 docs 编辑文档，在 docs/components 下增加 xxx.md 文件，在docs/.vuepress/config.js的 sidebar 配置增加路由引用。

说明文档结构参考已有页面。

markdown 语法参见Markdown 官方教程 。

4. npm run docs:dev 查看和调试文档效果。

发布组件

1. 提交代码。commit 提交更新内容。commit 信息请说明本次修改内容。

2. 构建项目，npm run build。

3. 登录 npm，如果用 taobao 等需切换到 npm 源，登录使用 adduser 或者 npm login。

4. 修改版本号，npm version，版本号结构 X.Y.Z，比如从 1.1.0 更新到 1.2.0,npm version 1.2.0 或 npm version minor。版本号对应语义如下，建议新增组件增加次版本号，对已有组件的更新修改修订号，避免不兼容修改。

• 主版本号：不兼容的修改，major
• 次版本号：向下兼容的功能性新增，minor
• 修订号：向下兼容的问题修正，patch

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

npm version 命令会同时执行 commit 并打 tag。

5. 推送更新, npm publish
6. 使用此组件库的项目更新组件库。