vc-design v0.3.6

vc-design

An ui component library built on vue.js.

Documentation

Install

npm i vc-design

Quick Start

import Vue from 'vue'
import ElementUI from 'element-ui'
import vcDesign from 'vc-design'

Vue.use(vcDesign)

// or
import {
  Button,
  Swipe
} from 'vc-design'

Vue.use(Button)
Vue.use(Swipe)

For more information, please refer to Quick Start in our documentation.

LICENSE

MIT

说明

1、入口文件 src/index.js 由 build/build-entry.js 生成，根据 components.json 文件中的组件列表自动生成

2、examples/docs/install.md 由 build/build-install.js 根据模板文件 examples/template/install.handlebars 文件生成，主要是注入当前版本 version

3、src/style/index.scss 由 build/style/mixCssFile.js 生成，根据 components.json 文件中的组件列表自动生成

4、build/webpack.component.js 是根据 components.json 组件编译每个组件，编译类型为 commonjs，因为按需加载时，每个组件可能引用公共文件代码，一下子编译为 es5 会导致代码量增多，因为公共代码打了多份进去

5、scss 编译是 build/style/build-theme.js，通过 gulp 进行编译，按需加载是使用 babel-plugin-import， build/style/build-style-entry.js 生成 lib/组件名/style/index.js，这个文件会引入组件的样式文件，按需引入会自动去加载这个文件

6、文档工程页面配置在 examples/config.yml 中，页面路由配置也在其中

7、examples/docs/*.md 文件会被解析成 vue 单文件，支持将 demo 代码直接编译成组件样式，如

:::demo 这里是描述，可以不要

<template>
  <component></component>
</template>

:::

还支持

:::warning 描述 :::

:::info 描述 :::

:::error 描述 :::

增加这3种样式展示，会自动添加 对应的样式名

8、packages 中要引入 src 中的文件，需要使用 vc-design/src/ 路径，vc-design 被设置了 alias 别名，在构建时会被转换为其他路径名称，而不是将其打包进组件中，这是为了按需加载使用，src 中的文件要引入 src 中的其他文件也是 vc-design/src/ 路径引入，别名配置在 build/config.js 和 .babelrc 中配置

9、package 命令说明：

# 运行开发环境
npm run dev

# 执行打包
npm run dist

10、国际化，在组件中加入国际化，打包时国际化文案会被打包成2种格式，1种 commonjs 类型，为了给按需引入使用，1种为 umd 类型，为了给CDN使用，CDN构建通过 build/build-locale.js 生成

<template>
  <div>{{ t('your.key.path) }}</div>
</template>
<script>
import locale from 'wot-design/src/mixins/locale'

export default {
  mixins: [locale]
}
</script>

11、文档项目右上角版本切换，在 examples/layout/header.vue 文件中，获取版本的线上url地址在 examples/config.yml 配置，但跳转的话得你自己修改，具体看代码，开发环境的 version.json 文件是自动生成的，根据 examples/docs/changelog.md 自动抽离版本号，只保留第二位版本的最高版本，即 1.0.1 和 1.0.2 只留 1.0.2，因此changelog必须按照该格式编写