pipi-ui

介绍

这是一个组件库架子，也是一个组件库。

为什么说是组件库，pipi-ui 将会集成更多的组件，发布到 npm 上（通用性组件，样式组件等等）:crocodile:。

为什么说是架子，因为内部实现了动态修改 pakeage.json 和动态 npm 修改 npm config 的功能，这意味着我可以根据不同的环境上传不同组件库，使这些不同的组件库集中在一个项目里面管理，还有自动集成文档例子、组件库文档等等功能

基于 vue-cli 和 vuepress 维护团队/个人组件库 💛 💛 💛

Features

• 集成 examples 方便调试，和测试工具（mocha + chai）
• 按需加载组件
• 根据注释集成自动化生成文档（vuepress + vue-docgen-cli）
• 根据组件修改自动更新文档（开发模式）
• 动态修改 packapge.json 和 npm 配置（多库统一）
• 优化多库统一的管理
• 添加 eslint
• 代码规范工具

脚本

npm i //按照依赖

npm run serve //启动例子

npm run docs //启动自动生成的文档

npm run build //构建组件库

npm run docs:build //构建文档

npm run publish //发布到npm，注意必须先在npm login

下一步计划

优化多库统一的管理

新增 ui 库 pipi-el-ui，对 element-ui 的组件高层级封装（hoc），完善业务

Examples

Question

q：可以不用项目里面的 npm run publish 吗？

a：npm run publish 该命令的主要作用的是，根据你本地 xxx.env.js 里面的 package 和 npm 去动态修改 package.json 配置和 npm 的设置，最后 npm publish（必须首先执行 npm login）， 执行成功后会恢复当前的 package.json。

如在当前目录直接执行 npm publish 会直接发布当前的 package.json 上 npm

q：增加多一个组件库该如何设置？

a：步骤如下:

//在根目录建pipi-ui.env.js文件
module.exports = {
  key: "pipi-ui", //当前环境
  components: "packages", //组件库所在的目录（根目录）
  packages: {
    //当前组件库名字
    name: "pipi-ui",
    //下一组件库版本
    version: "1.0.7",
    // ...  其他设置
  },
  //发布npm的设置
  npmConfig: {
    //设置npm的地址
    registry: "https://registry.npmjs.org/",
    // ...  其他设置
  },
  //vue.config.js选项
  "vue.config": {},
};

再在 package.json 的 scripts 增加如下

"scripts": {
        "build:pipi-ui": "vue-cli-service build pipi-ui && node build/gen-css-js.js",
        "publish:pipi-ui": "node build/gen-publish.js pipi-ui",
        "docs:pipi-ui": "concurrently \"vue-docgen --watch\" \"vuepress dev docs pipi-ui\"",
        "docs:build:pipi-ui": "vue-docgen && vuepress build docs pipi-ui",
    },

:::warning

注意：因为发布要到 npm，registry 必须是 npm 的地址，所以如果设置淘宝镜像或者 cnpm，可以自行修改 gen-publish.js，npm publish 改成 npm publish && npm set registry=镜像地址

:::

q：打包后的组件库如何按需导入？

a: 步骤如下：

npm i babel-plugin-component -D

//在babel.config.js增加
[
    "component",
        {
            libraryName: "pipi-ui",
            libDir: "lib/es",
            style: "style/index.css",
        },
    "pipi-ui",
],

:::warning

若使用的是 babel-plugin-import，按需导入样式不生效（原因未知）

:::

Contributors ✨

lgkang ️️️️♿️ 💬 📝 🐛 💼 💻 🖋 🔣 🎨 📖 📋 💡 💵 🔍 🤔 🚇 🚧 📦 🔌 📆 👀 🛡️ 📢 ⚠️ 🔧 🌍 ✅ 📓 📹

wutihong 💻 🖋 🔣 📖

llzzrr 💼 💻 🖋 🔣 📖

lingfeng ️️️️♿️ 💬 📝 🐛 💼 💻 🖋 🔣 ✅ 📓 📹

ypl9591 ️️️️♿️ 💬 📝 🐛 💼 💻 🖋 🔣 📖 📋 💡 💵 🔍