引言

vucc: vue pc端组件库,转为快速开发而生

兼容性

chrome 49.0.2623：全兼容

firefox 41.0.1：全兼容

ie10~11：全兼容

ie9：css3动画无效，其他都兼容

ie8：css3属性均无效，其中以圆角效果为主的组件效果比较差。

建议在以ie9以上浏览器为主的情况下，采用本组件。

安装和使用方法

调用

a) npm引入

npm install vucc

或者:

package.json 中配置 dependencies

“vucc” : “^1.2.0”

b) 标签引入

下载源代码

script引入/dist/app.js

link引入/dist/style.css

使用方法

一、 整体库引用

支持cmd && amd引入方法 && 直接引入的方法

a)

let components = require('vucc'); 或
import components from 'vucc';

b)

require('vucc/style.css');
import components from 'vucc/split';

加入到vue中使用方式

// 只使用组件库
{
    components: components
}
// 使用组件库和外部其他组件
{
    components: Object.assign({}, components, {
        // 其他组件
    })
}

c)

// 使用组件库和外部其他组件
{
    components: Object.assign({}, window.__vc__design__, {
        // 其他组件
    })
}

二、 整体库引用

支持cmd && amd引入方法 && 直接引入的方法

a)

let vButton = require('vucc/button'); 或
import vButton from 'vucc/button';

b)

window.vButton

加入到vue中使用方式

// 使用组件库和外部其他组件
{
    components: Object.assign({}, vButton, {
        // 其他组件
    })
}

组件开发规范

es6

组件代码全面支持 es6 的编码规范,编码时统一采用es6的统一写法进行代码编写
每个组件为一个模块

新建组件

新增组件步骤:

  • · 以组件名新增文件夹
  • · 文件夹下新增index.vue

  • · public.js 中引入相关的组件,以 v + 组件名 的驼峰写法对外暴露的组件名

    例: button组件 暴露为 vButton

  • · 外部在引入组件即可使用

原则上每个组件文件夹只对外暴露一个同名组件

组件模块顺序

组件采用vue单一文件组件的方式进行编写,文件内部结构顺序为:

  • · 注释说明
  • · template
  • · script
  • · style

注释说明

注释说明应遵循jsdoc相关规范,主要说明内容示例如下:

<!--
   组件名称 + 描述
   @requires 依赖模块说明(如有)
   @param {参数类型} 参数名 参数说明
-->

所有参数都应体现在组件头部方便大家查找使用

template

template为组件模板,主要需要注意以下两点:

  • · 使用简写
    按照vue约定统一使用简写,具体可参考vue缩写

    例:

    v-bind:click 简写为 @click |
v-bind:class 简写为 :class

  • · 唯一包装元素
    不推荐:

    <template>
      <span></span>
      <button :style="appendStyle" :class="['vc-btn', typeClass]">
            <slot></slot>
      </button>
    </template>

    推荐:

    <template>
      <button :style="appendStyle" :class="['vc-btn', typeClass]">
        <span>
            <slot></slot>
        </span>
      </button>
    </template>

这么做是为了在使用this.$el时,返回组件实体,而不是#text节点,具体可参考片段实例

script

  • · props
    外部传入组件的参数,如有默认值,可以写入默认值,必填项必须做出必须做出类型限制,并在文档中给出相应的说明
    例子:
    props: Object.assign({}, componentBaseParamConfig, {
          type: {
            type: String,
            default: 'default'
          },
          size: {
            type: String,
            default: 'normal'
          },
          isDisabled: {
            type: Boolean,
            default: false
          }
        })

组件代码构建

代码主要采用webpack为构建方案,cmd为模块化方案,页面能够进行自动热替换

以下操作之前你得先进入项目vue目录下

准备

首先,你得有nodejs + npm

$ npm install

开发环境启动

启动开发环境,只需要

$ npm run dev

然后可以在 http://localhost:8090/test/ 看到demo

开发环境打包

生成文件为未压缩的调试代码,需执行

$ npm run prd

高级使用

使用theme.scss替换现有样式库配置文件,中的配置样式

使用准备

必需要安装的npm包

node-sass,sass-loader,node-bourbon

webpack中配置

sassLoader: {
includePaths: [path.join(__dirname, ‘./src’)] // ./src下新建theme.scss即可
}

theme.scss中覆盖使用

在theme.scss中覆盖当前样式变量,具体样式变量如下

// prefix classname
$css-prefix: vc-;
$iconfont-css-prefix: vci;
// color
$base-color: #1b1e25;
$gray-color: #8b91a0;
$blue-color: #3598dc;
$info-color: $blue-color;
$primary-color: #57cc95;
$success-color: #57cc95;
$error-color: #f35958;
$warning-color: #f9ba46;
// border color
$border-color: #e5e9ec;
$border-focus-color: #d2d4d8;
$border-disabled-color: #d2d4d8;
$box-shadow: 0 1px 4px rgba(40, 40, 40, 0.15);
$border-color-split: #f0f0f0;
// margin && padding
$gutter-base:           20px;
$gutter-sm:             10px;
$gutter-lg:             30px;
// form item height
$height: 36px;
$height-xs: 28px;
$height-sm: 32px;
$height-lg: 40px;
// background
$base-bg: #e5e9ec;
$body-bg: $base-bg;
$hover-bg: #f1f4f6;
$light-bg: #f1f4f6;
// form item height
$height:    36px;
$height-xs: 28px;
$height-sm: 32px;
$height-lg: 40px;
$font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB", "Microsoft Yahei", "\5b8b\4f53",Arial,sans-serif;
$code-family: Consolas,Menlo,Courier,monospace;
$font-size-base: 12px;
$font-size-lg: 14px;
$font-size-xl: 16px;
$line-height-base: 1.5;
$border-radius-base: 3px;
$border-radius-lg: 5px;
// cursor state
$cursor-disabled: not-allowed;
$cursor-pointer: pointer;
// link
$link-color:            $blue-color;
$link-hover-color:      tint($link-color, 20%);
$link-active-color:     shade($link-color, 5%);
$link-hover-decoration: none;
// scrollbar
$scrollbar-width: 8px;
$scrollbar-height: 8px;
$scrollbar-thumb-bg: #bebdbd;
$scrollbar-thumb-hover-bg: #666;
$scrollbar-track-piece-decrement-bg: #f5f5f5;
$scrollbar-track-piece-increment-bg: #f5f5f5;
// animation
$ease-out:              cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in:               cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out:           cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back:         cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back:          cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back:      cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-out-circ:         cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-circ:          cubic-bezier(0.6, 0.04, 0.98, 0.34);
$ease-in-out-circ:      cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-quint:        cubic-bezier(0.23, 1, 0.32, 1);
$ease-in-quint:         cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-out-quint:     cubic-bezier(0.86, 0, 0.07, 1);
// input
$input-padding: 3px 10px;
$input-padding-lg: 3px 20px;

组件示例

组件示例

图标

栅格化

栅格化布局采用24栏处理，
vc-col-* 代表所占的栅格栏数
vc-offset-* 代表模块左侧占多少栏空白

<div class="vc-row">
    <div class="vc-col-6">6列</div>
    <div class="vc-col-18">18列</div>
</div>