pmcp-ui v0.0.35

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

创建新组件

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

组件文件夹格式

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

组件开发流程

组件编写示例：

# 执行下面命令后，会对应的生成以下文件
$ npm pmcp-cli create pmcp-alert

添加组件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

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

在项目中引入使用

全量引用

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

Vue.use(PmcpUI);

按需引用

按需引用会基于组件自动加载样式文件

import { PmcpAlert } from "pmcp-ui";

Vue.use(PmcpAlert);

webpack

const basename = path => {
  const pathArr = path.split("/");
  return pathArr.length > 0 ? pathArr[pathArr.length - 1] : "";
};
// 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",
          `${basename(stylePath, ".js")}.css`,
        ].join(path.sep);
      },
    }),
  ],
}),
compilerOptions: {
  module: "es2015",
}

const basename = path => {
  const pathArr = path.split("/");
  return pathArr.length > 0 ? pathArr[pathArr.length - 1] : "";
};

// awesome-typescript-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", `${basename(stylePath, ".js")}.css`].join(path.sep);
      },
    }),
  ],
}),
compilerOptions: {
  module: "es2015",
}

// import { kebabToCamel } from './utils/util'
// import components from "../components.json"

// const files: any = require.context("../packages/", true, /\.vue$/)

// const modules = {}
// files.keys().forEach((key: string) => {
//   const keys: string[] = key.split("/")
//   if (keys.length > 3) {
//     const compKey: string = keys[1]
//     if (components[compKey]) {
//       const compName: string = kebabToCamel(compKey)
//       modules[compName] = files(key).default || files(key)
//     }
//   }
// })