PMCP-UI 组件库

PMCP UI components 组件库

简化开发流程、提升开发效率、减少冗余代码、避免重复开发

建立基于 element-ui 的二次封装组件库，提高 UED、产品及开发团队的协同工作 更好的让 UED 见到组件的实际效果、让产品了解现有组件功能、让开发更快的寻找已经开发过的组件进行新功能的开发。利用 storybook 的实时进行新增组

安装

$ npm install -g mkdirp cross-env commitizen
$ npm install
$ npm run iconfont // 同步iconfont.css文件，方便开发在storybook中使用icon

创建新组件

$ npx pmcp-cli create component-name # 新增组件
$ npx pmcp-cli delete component-name # 删除组件

组件文件夹格式

|─ packages // 组件代码所在位置
| |─ pmcp-alert
| | |─ index.ts // install代码，用于引入Vue.use进行安装
| | └─ src // 组件相关代码
| | | |─ index.vue
| | | |─ index.ts
| | | └─ index.scss

组件开发流程

组件编写示例：

# 创建组件
$ npx pmcp-cli component -c pmcp-alert
# 删除组件 会讲create中对应生成的文件目录删除
$ npx pmcp-cli component -r pmcp-alert

# 创建组件的文档文件
$ npx pmcp-cli story -c pmcp-alert
# 删除组件的文档文件
$ npx pmcp-cli story -r pmcp-alert

[project name]
+-- packages # 组件代码所在位置
| +-- pmcp-alert # 组件 - 通过npm pmcp-cli component命令生成
| | +-- index.ts # install代码，用于引入Vue.use进行安装
| | `-- src # 组件实现源码目录
| | | +-- index.vue
| | | +-- index.ts
| | | `-- index.scss
+-- src # 组件代码所在位置
| +-- stories # 文档文件夹
| | `-- pmcp-alert.stories.ts # 文档ts文件 - 通过npm pmcp-cli story命令生成

添加组件vue文件 packages/pmcp-alert/src/index.vue

<template>
  <div class="pmcp-alert">
    pmcp-alert
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" src="./index.scss"></style>

添加组件ts文件 packages/pmcp-alert/src/index.ts * 切记 class PmcpAlert 组件名即为注册名称

import { PmcpUIComponent } from '@/pmcp-ui-component'
import Component from 'vue-class-component'

// PmcpAlert类名会作为组件名注册
// <PmcpAlert />或 <pmcp-alert />加载后，引入有效
// 但鉴于项目统一性，暂定为<pmcp-alert />
@Component({
  name: 'pmcp-alert'
})
export default class PmcpAlert extends PmcpUIComponent {}

添加组件样式文件 packages/pmcp-alert/src/index.scss

.pmcp-alert {
  font-family: $font-family;
}

添加引用安装代码 packages/pmcp-alert/index.ts

在其他组件库通过Vue.use单独安装使用

import PmcpAlert from './src/index.vue'

PmcpAlert.install = function (vue: any) {
  vue.component(PmcpAlert.name, PmcpAlert)
}

export default PmcpAlert

打包流程

$ npm run build

发布流程

$ npm run np

在项目中引入使用

# 切换至npm私有库后执行
$ npm i --save pmcp-ui@latest

全量引用

import PmcpUI from "pmcp-ui";
import "~pmcp-ui/lib/theme-pmcp/index.css";

Vue.use(PmcpUI);

按需引用

按需引用会基于组件，自动找到对应样式，并引入项目，所以需要更新如下配置

import { PmcpAlert } from "pmcp-ui";
Vue.use(PmcpAlert);

如果使用webpack

方法1：.babelrc.js 在babel转换ES时处理按需加载

$ npm i --save-dev babel-plugin-import

// .babelrc.js
plugins: [
  [
    "import",
    {
      libraryName: "pmcp-ui",
      libraryDirectory: "lib",
      style: stylePath => {
        return [
          "pmcp-ui", 
          "lib", 
          "theme-pmcp", 
          `${path.basename(stylePath, ".js")}.css`
        ].join(path.sep);
      },
    },
  ],
  ...
]

方法2：使用ts-loader

// 在typescript进行编译时处理按需加载
// ts-loader options
// 配置进行按需载入
const path = require("path")
module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            getCustomTransformers: () => ({
              before: [
                tsImportPluginFactory({
                  libraryName: "pmcp-ui",
                  libraryDirectory: "lib",
                  contentBase: path.resolve(__dirname, "node_modules"),
                  style: stylePath => {
                    return [
                      "pmcp-ui",
                      "lib",
                      "theme-pmcp",
                      `${path.basename(stylePath, ".js")}.css`,
                    ].join(path.sep);
                  },
                }),
              ],
            }),
            compilerOptions: {
              module: "es2015",
            }
          },
        },
      ],
    },
  ]
}