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

@zhinan/tb-components

v1.7.10

Published

Zhinan's components for teambition-app project

Downloads

35

Readme

tb-components

A components library for TB applications.

使用

全局引入样式:

// main.js
require('@zhinan/tb-components/dist/main.css')

全局注册组件:

// main.js
import * as tbc from '@zhinan/tb-components'
Vue.use(tbc)

或局部引入组件:

// eg.vue
import { Loading } from '@zhinan/tb-components'

开发、测试、打包命令

# install dependencies
yarn install # 请务必使用 yarn 命令来安装,否则无法精确安装已锁定版本的依赖

# serve with hot reload at localhost:8081
yarn run dev

# build for production with minification
yarn run build

# build docs
yarn run build:docs

# run unit tests
yarn run unit

# run all tests
yarn test

工作流

技术栈:

  • Vue 2 (https://cn.vuejs.org/)
  • less (CSS 编写方案)
  • Vue scoped style (CSS 模块化方案)

开发工具:

  • yarn
  • babel
  • webpack
  • eslint (airbnb-base)
  • karma + mocha + phantomjs
  • ...

推荐的编辑器:

VSCode

推荐的插件:

  • Add New Line to Files

  • Auto Rename Tag

  • HTML CSS Support

  • HTML Snippets

  • Path Intellisense

  • ...

协作要求:

为方便协作开发,预先约定如下:

  • 样式编写使用 less
  • 局部样式:每个 视图/组件 的样式写在各自文件的 <style lang="less" scoped></style> 标签中,其为局部作用域,仅对当前文件有效;所以 className/tagName 随意命名,不用担心与其他样式冲突
  • 公共样式:可在 /styles 下增加公共的 .less 文件,然后在 .vue 视图文件的样式标签中手动 @import 加载
  • 全局样式:已全局加载,必须写在 /styles/global/ 下,并且 className 必须有 global-- 前缀。其 className 可在任何模板中使用
  • 第三方全局样式:可能会引入一些第三方 .css 文件,在 /main.js 入口文件中使用 require('xxxx) 全局加载
  • 其他资源:.less/.js/.vue 以外的资源放在 /assets 下的分类目录中,如图片放在 /assets/images

文件的引入方式:

src 已添加到 webpack 别名,别名为 @,可以这样使用:

.js : import xxx from '@/utils/xxx'

.vue : import xxxx from '@/components/xxxx'

.css :(来自于 node_modules 的外部文件)

    在 /main.js 入口文件中使用 `require('xxxxx.css')` 全局引入

.less :

    全局引入:在 /main.js 入口文件中使用 `require('xxxx.less)`

    局部引入:在 .vue 文件的 <style> 标签中,或 .less 文件中:使用 `@import "~@/styles/xxx.less";`

svg/png/eot/json/other :

    在 .vue 文件的 <style> 标签中,或 .less 文件中:使用 `background: url(~@/assets/images/xxx.png);`
    
    在 js 代码中推荐使用 `const xxx = require('@/assets/images/xxx.png')` [ * 当然你要是想用 import xxx from '@/assets/images/xxx.png' 也可以,但 require 更加清楚地表明了这是 webpack 的能力,所以更推荐前者 ]