npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

patd-vue

v3.0.2

Published

Vue component library based on Pay.css

Downloads

70

Readme

PATD-VUE 开发上手指南

React UI library based on Pay.css

结构介绍

  - pay-css:这是一个submodule独立的代码库,也是一个独立的项目,用来编写和生成CSS样式的代码库。
  - example:这是一个可以运行的项目,用来展示编写的组件样式和测试功能。
  - src: 组件在这个目录下编写。
  - docs: 这个是PATD官网组件文档引用的md,在这里编写官方文档.

安装

要开始Patd-vue的开发,需要同安装好pay-css,patd-vue,example 三个项目。

请注意你的Node JS 版本:

  • Node 版本:16.14.0 (软件超市可以安装)
  • npm 版本: 8.5.5

初始化 submodul Pay-css

git submodule init
git submodule update

安装 Pay-css

patd-vue: cd pay-css
pay-css: npm install

安装 Patd-vue

patd-vue: npm install

安装 Example

  • 由于Cypress依赖需要外网环境安装,所以安装依赖Cypress时可能会报错。Cypress的报错并不影响项目启动,可以跳过。
  • 更好的办法是在package.json当中去掉 Cypress, 这是个用来测试的依赖,开发不会用到。
patd-vue: cd example
example: npm install

启动项目 start

首先启动pay-css,让他生成css文件,patd-vue的大部份样式都依赖于此,编写样式也在这里完成。

patd-vue: cd pay-css
pay-css: npm run start

然后我们就可以开始开发了,启动我们的patd-vue

patd-vue: npm run start

最后我们想要查看我们的组件效果,所以也要启动example项目,实时查看最终的效果。

patd-vue: cd example
example: npm run start

同时启动以上三个项目,最后打开http://localhost:8080/#/ 就可以开始开发了

代码提交规范

项目已开启神兵钩子检测,提交需要按照规范格式

<空间简称#卡片ID> <type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

header

空间简称#卡片ID

必填。 故事卡片、任务卡片、缺陷卡片三类卡片可提交代码,该信息可以直接通过卡片标题前的复制按钮获取

type

必填。

  • feat:新功能,新特性(feature)
  • fix:修复bug
  • docs:文档(documentation)
  • style:代码格式修改,功能保持不变
  • test:测试用例修改,
  • chore:构建过程或辅助工具的变动, 比如构建流程, 依赖管理等.(无法判断的提交推荐用这个)

scope

可选。 scope用于说明 commit 影响的范围,比如数据层、控制层、视图层等等,视项目不同而不同。也可以是route, component, utils, build...

subject

必填。 subject是 commit 目的的简短描述,不超过50个字符

body

Body 部分是对本次 commit 的详细描述,可以分成多行。 提交的时候应该说明代码变动的动机,以及与以前行为的对比。

footer

footer 部分只用于两种情况。

  1. 不兼容变动 如果当前代码与上一个版本不兼容,则 footer 部分以BREAKING CHANGE开头,后面是对变动的描述、以及变动理由和迁移方法。
  2. 关闭 Issue 如果当前 commit 针对某个issue,那么可以在 footer 部分关闭这个 issue 。
Closes #123, #234, #345