从 Vue-cli 开始构建 UI 库到 Markdown 生成文档和演示案例 (3)

对App.vue样式和排版布局进行调整

8. 开发第一个组件

开发一个按钮组件，在src\components下开发kt-button.vue按钮组件

<template> <div> <slot></slot> </div> </template> <script> export default { name: 'KtButton' } </script> <style> .kt-button { border: 1px solid #41a259; background-color: #41a259; display: inline-block; border-radius: 2px; height: 14px; line-height: 14px; color: #fff; padding: 10px 19px; cursor: pointer; white-space: nowrap; } </style>

在examples\docs下创建button.md进行文档编写和代码示例

# Button 按钮 ## 基础用法 :::demo 通过`plain`属性可以设置为朴素的按钮 ```html <kt-button>确认</kt-button> ``` ::: ```

路由配置

export default new Router({ routes: [ { path: '/test', name: 'test', component: r => require.ensure([], () => r(require('../docs/test.md'))) }, { path: '/button', name: 'button', component: r => require.ensure([], () => r(require('../docs/button.md'))) } ] })

首页链接配置

<router-link to="/button">button 组件</router-link>

配置src下的的index.js

import KtButton from './components/kt-button.vue' const components = [KtButton] export default function(Vue) { components.map(component => { Vue.component(component.name, component) }) }

main.js安装所有的组件，让所有的docs下的md文件都可以调用

import install from '../src/index' install(Vue)

效果预览，组件开发完成

8. 项目代码

代码下载：github

示例演示： shui.kitorv.com