An ui component library built on vue.js.
npm i vc-design
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.
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必须按照该格式编写