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

jinpai-component

v0.0.1

Published

A Vue.js UI Toolkit for jinpai

Downloads

3

Readme

hekr-jinpai-components

A Vue.js UI Toolkit for Hekr

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

组件使用

开发文档

http://10.10.1.3:7777/hekr-jinpai-components/index.html

NPM安装使用

  1. 运行npm install @hekr/hekr-jinpai-components --save
  2. 安装chart.js依赖
  3. 引入组件import HekrComponents from '@hekr/hekr-jinpai-components'
  4. 安装组件Vue.use(HekrComponents)
  5. 引入css文件import '~@hekr/hekr-jinpai-components/dist/hekr-jinpai-components.css'
  6. 组件库中的自带图标使用方式为hk-icons-{图标描述字符串}

全局script标签方式引入

  1. 在html中分别引入组件的js和css文件,组件会注册全局变量HekrComponents
  2. 在代码中使用Vue.use(HekrComponents)安装组件
  3. 如果在代码中没有使用到hk-chart组件,则可以不引入chart.js,如果使用到了,则需要引入chart.js,并且要保证chart.js会注册全局变量Chart供hk-chart使用,否者会报错
  4. 组件库中的自带图标使用方式为hk-icons-{图标描述字符串}

多语言支持(具体参考i18n)

  1. 组件默认语言为中文(en-US)
  2. 组建中包含中文(zh-CN)和英文(en-US)两种语言
  3. 扩展支持其他语言:在安装组件时使用传入其他的语言包即可
  4. 使用示例
  • 使用内置语言
import hekrComponents from '@hekr/hekr-jinpai-components'
// 使用内置的中文
Vue.use(hekrComponents, {
  lang: 'zh-CN'
})
  • 扩展语言
import hekrComponents, { i18n } from '@hekr/hekr-jinpai-components'
// 使用自定义语言
i18n.extend = {
  'fr': {/** 语言配置 */},
  'zh-TW': { },
  'zh-CN': {
    /** 递归合并的方式进行语言替换 */
    dialog: {
      comfirmText: '确定',
      cancelText: '确定'
    }
}

Vue.use(hekrComponents, {
  lang: 'fr'
})

在项目中使用时注意事项

  1. 本组件库是采用rem为单位开发的,所以在项目中也尽量使用rem为单位开发
  2. 组件库已经默认集成了rem适配的代码,所以在项目中不需要再写rem适配

开发规范

关于组件规范请阅读vue风格指南

整体规范风格

  1. 所有的js都必须强制使用eslint进行格式的规范,eslint规则使用eslint-config-standard规则,并且书写js时请尽量采用es6+的特性,并适时书写必要的注释
  2. 所有组件的css预处理语言使用stylus,在项目中不得使用其他css处理器
  3. template模板统一使用pug,使用pug的目的是规范template的格式,使整个项目更整洁代码风格一致
  4. 每个组件都必须放在一个文件夹下面,在文件夹下必须编写组件的README.md文件,该README文件也同时会出现在调试界面
  5. 每个组件文件夹下必须有一个index.js文件,该文件主要是负责导出组件的install函数,可参考src/components/button
  6. 编写组件必须在examples文件夹下编写对应的demo,开发的时候的入口文件就是examples/index.js

命名规则

  1. 所有文件(文件夹)命名必须采用kebab-case (短横线分隔命名)的方式
  2. 所有的的组件都必须给定一个name,并且name也是采用kebab-case方式命名,并且必须添加前缀hk,如:hk-button
  3. 所有的css类都必须采用kebab-case命令的方式
  4. js变量都必须采用camelCase(驼峰命名),不使用也可以,只要你能通过eslint检测
  5. 组件的props声明时采用camelCase命名方式,在template中使用的时候采用kebab-case的方式,如下:
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
  1. 事件名称统一都采用kebab-case的方式

template模板书写风格

  1. 当模板中一个标签有多个属性时,请换行书写,以提高可读性
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>
  1. template中属性的最外层引号请使用双引号("")
  2. template指令都采用缩写的方式,如v-bind => :

注意事项

  1. 开发一个组件(component)或者一个包(package)之后,必须手动在components文件夹下index.js中添加导出模块的代码
  2. 编写的组件必须同时支持鼠标事件和触摸事件,且不能狗冲突或者同时发生
  3. 项目中所有使用到的单位都必须是rem,HTML根元素的font-szie为20px,所以我们定义一个大小为20px的时候使用1rem,注意:定义html为20xp是由于在chrome PC版上最小字体为12px,所以调试的时候会出现偏差
  4. 目录结构说明
examples
│  App.vue
│  index.js // 开发环境入口文件
│  Sidebar.vue // 侧边导航
│  Demo.vue // views文件夹下面的对应视图
│  Docs.vue // 读取每一个组件下面的README文件,并生成组件的文档到视图
│
├─router // vue 路由和导航相关
│      index.js // 定义路由
│
└─views // 路由视图
    └─button // 路由页面文件夹
            index.vue // 编写对应名字组件的demo
src
│  index.js // 导出所有组件
│
├─components // 基础组件
│  │  index.js // 导出所有components
│  │
│  └─button // button组件
│          button.vue
│          index.js // 编写install函数并导出
│          README.md // 组件README文件
│
└─stylus // 样式文件
        hekr-jinpai-components.styl
        variables.styl // 样式变量