@58fe/p5

pc端vue组件

Usage no npm install needed!

<script type="module">
  import 58feP5 from 'https://cdn.skypack.dev/@58fe/p5';
</script>

README

P5

基于 VUE 的前端 PC 端 UI 组件库

安装

npm install @58fe/p5  --save

使用

导入需要的组件,例如:

import { Loading } from '@58fe/p5';

组件

  • loading
  • 按钮类
  • 走马灯
  • 消息提醒
  • 开关
  • 无限下拉
  • 选择器
  • 浮窗
  • 上传文件
  • Dialog
  • 多选框
  • 局部刷新
  • 下拉框
  • 表格
  • toast
  • tooltip

支持的插件有

  • 加载
  • 弹窗
  • 消息提醒

支持自定义状态,内容,按钮等

按需加载

如过需要按需加载指定组件,需要配合 bable-plugin-p5-import 插件使用

npm install bable-plugin-p5-import --save-dev

在.babelrc 文件添加如下配置

{
    "plugins": [
        [
            "@58fe/babel-plugin-p5-import"
        ]
    ]
    
}

其他

1、打包时抛出 'These dependencies were not found:

原因是 P5 的样式是基于 sass 编写的,所以需要依赖以下两个 npm 包:

npm install sass-loader node-sass --save-dev

2、打包时抛出 Unexpected token

原因是 P5 的 js 源码没进行 babel 转译,可以在 webpack 配置中的增加以下 loaders:

{
    test: /p5.src.*?js$/,
    loader: "babel-loader"
}