@zhinan/tb-components

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 的能力，所以更推荐前者 ]