vue组件库和组件文档生成
公司现役组件库项目,公共资源或者新老项目切换仓库
调整 src 目录结构
|--src
|-- App.vue
|-- main.js
|-- packages // 新建此文件夹用来存放组件|-- index.js // 组件入口|-- button.vue // 新增一个button组件,记得带上name|-- icon // 新增一个icon组件,记得带上name
packages/index.js
// 所有组件的入口import Button from './button.vue'
import Icon from './icon.vue'// 全局注册
const install = Vue => {Vue.component(Button.name, Button)Vue.component(Icon.name, Icon)
}// 防止使用者直接以<script></script>方式引入if (typeof window.Vue !== 'undefined') {install(Vue) // 直接通过script方式引入组件
}
export default {install
}
测试组件
import okrUi from './packages/index'
Vue.use(okrUi)
app.vue 直接使用
<okr-icon></okr-icon>
<okt-btn></okt-btn>
接下来就简单了,只要在 packages 中新增组件就可以,在 index.js 中注册即可
关于发布
okr-ui 目录下新建.npmignore
src // 源码不发
public // 公用资源不发
test // 测试代码不发
package.json
"private": false, // 私有的改成false"version": "0.1.0", // 版本必须每次不一样
测试组件
https://vue-test-utils.vuejs.org/zh/installation/testing-single-file-components-with-karma.html
Karma 是一个启动浏览器运行测试并生成报告的测试运行器。 Mocha 框架撰写测试,同时用 chai 作为断言库。
- 安装依赖
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
- 安装 chai
npm install --save-dev karma-chai
官方的配置案例
var webpackConfig = require('./webpack.config.js')module.exports = function(config) {config.set({frameworks: ['mocha'],files: ['test/**/*.spec.js'], // 匹配所有的spec文件preprocessors: {'**/*.spec.js': ['webpack', 'sourcemap']},webpack: webpackConfig,reporters: ['spec'],browsers: ['ChromeHeadless'] // 打开一个无头的浏览器, 单纯用Chrome会闪动})
}
组件打包
package.json 新增命令
"lib":"vue-cli-service build --target lib -name okr-ui ./src/packages/index.js"
添加引用入口 package.json 根
- 打包后所有的组件都在 umd.min.js 中
"main":"./dist/okr-ui.umd.min.js"
生成组件文档
使用 vuepress
- 根目录下新建 doc 文件夹
初始化
npm init -y
安装 vuepress
npm i vuepress -D
配置 packages.json 新增 script
"docs:dev":"vuepress dev docs","docs:build":"vuepress build docs"
安装依赖工具
cnpm install element-ui highlight.js node-sass sass-loader --save
配置 vue-press
- doc 根目录下新建 docs(固定)
- docs 下新建 README.md(固定)
- docs 下新建 components 用于存放组件描述文件(固定)
- components 下新建 button.md(此处以 button 组件为例)
README.md(内容格式固定)
---
home: true
actionText: 欢迎 →
actionLink: /components/button // 以button为例
features:
- title: okr组件库 // 名称details: okr组件库,用公共组件存放,新老项目过度组件存放 // 组件库描述
---
button.md
## 按钮组件
运行命令
npm run docs:dev
跑起来的内容是不是很熟悉???但是比较丑是不是?
美化组件库文档界面
- 在 docs 下新建文件夹.vuepress
- 在.vuepress 中新增配置文件 config.js
module.exports = {title: 'okr-ui', // 网站标题description: 'okr公共组件库', // 网站描述dest: './build', // 设置输出目录port: '8088', // 端口themeConfig: {// 主题配置nav: [{text: '主页',link: '/'} // 导航条],sidebar: {// 侧边栏配置'/components/': [{collapsable: true, // 默认折叠children: ['button']}]}}
}
- 在.vuepress 文件里新建 styles 文件夹,并在 styles 中新建文件 palette.styl(固定)
$codeBgColor=#fafafa$accentColor=#3eaf7c$textColor=#2c3e50$borderColor=#eaecef$arrowBgColor=#ccc$badgeTipColor=#42b983$badgeWarningColor=darken(#ffe564,35%)$badgeErrorColor=#da5961.contentpre {margin: 0 !important;
}
.theme-default-content:not(.custom) {max-width: 1000px !important;
}
- .vuepress 目录下新建 enhanceApp.js(固定)入口定义文件
enhanceApp.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
// 自定义指令
Vue.directive('highlight', function (el) {let blocks = el.querySelectorAll('pre code')blocks.forEach(block => {hljs.highlightBlock(block)})
})export default ({ Vue, options, router, siteData }) => {Vue.use(Element)// 变更20210310,解决build异常问题提Vue.mixin({mounted() {import('okr-ui').then(function (m) {Vue.use(m.default)}).then(() => {import('okr-ui/dist/okr-ui.css') // 组件库样式})}})
}
- okr-ui 没有安装怎么引用?
- 去 okr-ui 根目录执行
npm link
此命令是将该项目链接到全局 - 然后在 docs 的文件中
npm link okr-ui
此命令是将全局注册的 okr-ui 拉进来进行使用 - 经过以上两步就能免发布使用了
- 去 okr-ui 根目录执行
测试
- .vuepress 下新建 components,此文件加下皆为全局组件
- 新建 button 文件夹/button 文件夹/test.vue
- 在 docs 根目录下的 conponents 的 button.md 进行测试
button.md
<button-test></button-test>
这样就会去.vuepress 组件中找到 button/test.vue 组件(固定写法)
运行命令 npm run docs:dev
- corejs 丢失 npm i core-js@2
- okr-ui 找不到???注意你的组件库中 package.json 中 main 属性有没有指定文件?
测试真实组件库中的组件
- 还记得刚才在 doc 文档库中已经引入了 okr-ui 了对吧,已经引用了吧?直接测试组件吧
- 比如我们在 okr-ui 中写了 okr-btn 这个按钮组件吧?
docs/.vuepress/components/button/test.vue
<okt-btn></okt-btn>
看页面是不是有了?
<template><div><okt-btn></okt-btn></div>
</template>
实现类似于 element-ui 组件库的文档体验
在 .vuepress 下 components 中新建组件文档展示模板 demo-block.vue
<template><divclass="demo-block":class="[blockClass, { hover: hovering }]"@mouseenter="hovering = true"@mouseleave="hovering = false"ref="demoBlockContainer"><div style="padding:24px"><slot name="source"></slot></div><div class="meta" ref="meta"><div class="description" v-if="$slots.default"><slot></slot></div><div class="highlight"><slot name="highlight"></slot></div></div><div class="demo-block-control" ref="control" @click="isExpanded = !isExpanded"><transition name="arrow-slide"><i :class="[iconClass, { hovering: hovering }]"></i></transition><transition name="text-slide"><span v-show="hovering">{{ controlText }}</span></transition></div></div>
</template>
<style lang="scss">
.demo-block {border: solid 1px dashed;border-radius: 3px;transition: 0.2s;&.hover {box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);}code {font-family: Menlo, Monaco, Consolas, Courier, monospace;}.demo-button {float: right;}.source {padding: 24px;}.meta {background-color: #fafafa;border-top: solid 1px #eaeefb;overflow: hidden;height: 0;transition: height 0.2s;}.description {padding: 20px;box-sizing: border-box;border: solid 1px #ebebeb;border-radius: 3px;font-size: 14px;line-height: 22px;color: #666;word-break: break-word;margin: 10px;background-color: #fff;}p {margin: 0;line-height: 26px;}::v-deep code {color: #5e6d82;background-color: #e6effb;margin: 0 4px;display: inline-block;padding: 1px 5px;font-size: 12px;border-radius: 3px;height: 18px;line-height: 18px;}
}
.highlight {pre {margin: 0;code {color: black !important;}}code.hljs {margin: 0;border: none;max-height: none;border-radius: 0;line-height: 1.8;color: black;&::before {content: none;}}
}
.demo-block-control {border-top: solid 1px #eaeefb;height: 44px;box-sizing: border-box;background-color: #fff;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;text-align: center;margin-top: -1px;color: #d3dce6;cursor: pointer;&.is-fixed {position: fixed;bottom: 0;width: 868px;}i {font-size: 16px;line-height: 44px;transition: 0.3s;&.hovering {transform: translate(-40px);}}> span {position: absolute;transform: translate(-30px);font-size: 14px;line-height: 44px;transition: 0.3s;display: inline-block;}&:hover {color: #409eff;background-color: #f9fafc;}& .text-slide-enter,& .text-slide-leave-active {opacity: 0;transform: translate(10px);}.control-button {line-height: 26px;position: absolute;top: 0;right: 0;font-size: 14px;padding-left: 5px;padding-right: 25px;}
}
</style>
<script type="text/babel">
export default {name: 'DemoBlock',data() {return {hovering: false,isExpanded: false,fixedControl: false,scrollParent: null,langConfig: {'hide-text': '隐藏代码','show-text': '显示代码','button-text': '在线运行','tooltip-text': '前往jsfiddle.net 运行此示例'}}},props: {jsfiddle: Object,default() {return {}}},methods: {scrollHandler() {const { top, bottom, left } = this.$refs.meta.getBoundingClientRect()this.fixedControl =bottom > document.documentElement.clientHeight && top + 44 <= document.documentElement.clientHeight},removeScrollHandler() {this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler)}},computed: {lang() {return this.$route.path.split('/')[1]},blockClass() {return `demo-${this.lang} demo-${this.$router.currentRoute.path.split('/').pop()}`},iconClass() {return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom'},controlText() {return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text']},codeArea() {return this.$refs['demoBlockContainer'].getElementsByClassName('meta')[0]},codeAreaHeight() {if (this.$refs['demoBlockContainer'].getElementsByClassName('description').length > 0) {return (this.$refs['demoBlockContainer'].getElementsByClassName('description')[0].clientHeight +this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight +20)}return this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight}},watch: {isExpanded(val) {this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0'if (!val) {this.fixedControl = falsethis.$refs.control.style.left = '0'this.removeScrollHandler()return}setTimeout(() => {this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__warp')this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler)this.scrollHandler()}, 200)}},mounted() {console.log(this.$refs.demoBlockContainer)this.$nextTick(() => {console.log(this.$refs['demoBlockContainer'])let highlight = this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0]if (this.$refs['demoBlockContainer'].getElementsByClassName('description').lenght === 0) {highlight.style.width = '100%'highlight.borderRight = 'none'}})},beforeDestroy() {this.removeScrollHandler()}
}
</script>
在 docs/components 下
使用模板/插槽
重新运行代码,是不是体验很棒??
代码地址
git@github.com:sunhailiang/publish-ui.git
vue组件库和组件文档生成相关推荐
- 微信小程序,引入WeUI组件库 扩展组件库
小程序扩展组件库 | 微信开放文档 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建 ...
- vue - element <upload> 组件批量上传文档,可携带其他表单数据项一同与文件 “手动提交“ 服务器(类似百度文库系统批量上传前端界面与逻辑)超详细教程示例源码,提供界面与逻辑完整源码
效果图 本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...
- 文档生成组件工作估算
笔者最近做一个系统的工作量预估,其中包含一个通用组件,文档生成组件的工作量预估,在此分享下. 功能要求:通过定制文档模板,依据设置的文档数据,抽取数据或图表,生成文档,记录所有生成文档,实现文档查询. ...
- AspnetCore 2.0 自动API文档生成组件,支持protobuffer
关于 API文档自动生成,用于对APP端的开发帮助文档生成,默认ProtoBuffer传输格式. 本项目并不是RESTful风格,是面向功能的API类型.ApiDoc的作用是根据定义好的API接口和注 ...
- vue进阶04-vue文档生成工具vuepress2
介绍 VuePress 是一个以 Markdown 为中心的静态网站生成器.你可以使用 Markdown 来书写内容(如文档.博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们. V ...
- 猿创征文|小而巧的API文档生成工具之smart-doc
文章目录 smart-doc介绍 smart-doc特性 smart-doc的最佳搭档 谁在使用smart-doc smart-doc的优缺点 smart-doc和swagger区别比较 smart- ...
- .NET平台开源项目速览(4).NET文档生成工具ADB及使用
.NET平台开源项目速览(4).NET文档生成工具ADB及使用 原文:.NET平台开源项目速览(4).NET文档生成工具ADB及使用 很久以前就使用ADB这个工具来生成项目的帮助文档.功能强大,在学习 ...
- unity mysql生成cexcel_【C#附源码】数据库文档生成工具支持(Excel+Html)
[2015] 很多时候,我们在生成数据库文档时,使用某些工具,可效果总不理想,不是内容不详细,就是表现效果一般般.很多还是word.html的.看着真是别扭.本人习惯用Excel,所以闲暇时,就简单的 ...
- SCADE Display(OpenGL)软件设计文档生成工具的设计考虑
SCADE Display(OpenGL)软件设计文档生成工具的设计考虑 2018年6月 1 引言 本文档描述在SCADE Display软件设计文档生成工具(以下简称为SDYSDDGEN)的设计过程 ...
- xml源文件的文档生成工具--DITA Open Toolkit(DITA-OT)的使用入门
公司的写作软件是oxygen xml editor,但对于文档的生成一直百思不得其解,除了使用公司定制的发布工具,试过oxygen xml editor的transformation功能,生成的文档很 ...
最新文章
- 转载:js拖拽文本文档并读取内容到textarea
- Windows Home Server中文版使用全攻略
- Java面向对象基础整理
- 关于海量数据查找排序问题
- How to create a jump server in AWS VPC
- JDK12的五大重要新特性
- 内嵌Tomcat的Connector对象的静态代码块
- Python基础44(PyMySQL模块)
- Android(Fragment和Activity之间通信)
- android 列表图片优化经历
- 浅析libuv源码-node事件轮询解析(2)
- 折腾Java设计模式之访问者模式
- 有哪些连接oracle的工具,连接oracle数据库工具有哪些
- 有限元法(Finite Element Method,FEM)原理详解
- html版权标签怎么打,版权符号怎么打_dreamweaver中版权的符号怎么打?
- 数学/数论专题-学习笔记:狄利克雷卷积
- 看巨人,学巨人,超巨人
- 股权转让项目:沈阳派尔化学有限公司55%股权转让
- 2020-08-16:数据任务是怎么优化的?(数据倾斜,参数相关调节)
- github上很好的iOS资源集锦