Vue2 模板

Vue2 UI

• package.json同级
• components/slButton/element.vue

<template><div class="d1"><span>测试123</span></div>
</template><script>export default {name:"sl-button",data() {return {};}}
</script>
// 不使用scss
<style scoped>
.d1 span{color:red;
}
</style>

• components/slButton/index.js

import sl from "./element";
sl.install = function (Vue) {Vue.component(sl.name, sl);
};
export default sl;

• components/function.js

export const ceshi = ()=>{console.log('123')
}

• components/index.js

import slButton from "./slButton";
import {ceshi} from  './function'const components = [slButton];const install = function (Vue) {if (install.installed) return;components.map((component) => Vue.component(component.name, component));Vue.prototype.$ceshi = ceshi;
};if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}
export default {install,slButton
};export { slButton };

使用

• main.js

import SL from '../components/index'
// 打包使用需要引入css
Vue.use(SL);<sl-button></sl-button>this.$ceshi()

UI 文档

• src 同级创建
• docs 文件夹

npm init -y     
npm i vuepress -D
npm i highlight.js -D

• docs/package.json

"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}

• docs 下创建 docs , docs/docs目录结构
  • .vuepress
    • components
      • slButton.vue
    • config.js
    • enhanceApp.js
    • index.css
    • mixin.js
  • components
    • sl-button.md
  • get-started
    • README.md
  • guide
    • README.md
  • install
    • README.md
  • README.md

docs

.vuepress

• components/slButton.vue

<template><div class="demo"><h2>创建组件文档模板</h2><p>组件描述</p><h3>组件功能名字</h3><p>组件功能描述</p><div class="component-wrapper"><div class="component-wrapper-demo">组件展示位置</div><div class="code-content" v-highlight style="height: 0;"><div class="code-content-height"><pre><code class="html">{{codeStr}}</code></pre></div></div><div class="lock-code" @click="showCode(0)" ref="xxx"><span class="icon-down" v-text="isShow[0] === false ? 'down' : 'up'"></span><span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span></div></div><h3>attributes</h3><p>组件参数说明后期扩展</p></div>
</template><script>
import mixin from '../mixin'
export default {name: 'demo',mixins: [mixin],data() {return {codeStr: `<sl-button></sl-button>`.replace(/^\s*/gm, '').trim(),}}
}
</script><style></style>

• config.js

const path = require('path')
module.exports = {base: '/slUI/',title: '❤ Sl UI',description: '一套为开发者学习准备的基于 Vue 2.0 组件库',head: [['link', {rel: 'icon', href: '/img/s.png', type: 'image/png'}] // 可去掉],themeConfig: {repo: true,// 默认是 false, 设置为 true 来启用lastUpdated: 'Sun',// editLinks: true,nav: [{text: '主页', link: '/'},{text: '指南', link: '/guide/'},{text: '交流', link: 'https://gitee.com/sunlei0718'},],sidebarDepth: 2,sidebar: [{title: '入门',collapsable: false,children: ['/guide/','/install/','/get-started/',]},{title: '组件',collapsable: false,children: ['/components/sl-button',]},]},markdown: {lineNumbers: true}
}

• enhanceApp.js

import './index.css'
import sl from '../../../lib/uu.common'
import  '../../../lib/uu.css' // 引入打包之后的需要css
//代码高亮文件引入
import Vue from 'vue'
import hljs from 'highlight.js'
//样式文件,这里我选的是sublime样式，文件里面还有其他样式可供选择
import 'highlight.js/styles/color-brewer.css'
Vue.directive('highlight',function (el) {let blocks = el.querySelectorAll('pre code');blocks.forEach((block)=>{hljs.highlightBlock(block)})
})
export default ({Vue, // VuePress 正在使用的 Vue 构造函数// options, // 附加到根实例的一些选项// router, // 当前应用的路由实例// siteData // 站点元数据}) => {Vue.use(sl)
// ...做一些其他的应用级别的优化
}

• index.css

.theme-container.sidebar-open .sidebar {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border: 0;
}
.sidebar, .navbar {z-index: 10000;
}.component-wrapper .component-wrapper-demo {padding: 24px 24px 15px 24px;
}.component-wrapper h4 {margin: 55px 0 20px;
}.component-wrapper:hover {box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
}.component-wrapper:hover >.lock-code .lock-code-word {font-size: 14px;transform: translateX(-40px);opacity: 1;
}.component-wrapper:hover >.lock-code .icon-down {transform: translateX(-40px);
}.component-wrapper {border: 1px solid #ebebeb;border-radius: 3px;transition: .2s;
}.component-wrapper .code-content {background-color: #fafafa;border-top: 1px solid #eaeefb;overflow: hidden;transition: height .2s;}.component-wrapper .code-content .code-content-height .code-user-desc{background: #ffffff;margin: 10px 10px 0 10px;padding: 5px 10px;font-size: 14px;line-height: 26px;border: 1px solid #ebebeb;border-radius: 3px;
}
.component-wrapper .code-content .code-content-height > pre {background: #f1bebe;
}
.component-wrapper .code-content .code-content-height > code {color: #3182bd;
}.component-wrapper .lock-code {border-top: 1px solid #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;position: relative;line-height: 44px;color: #d3dce6;text-align: center;}.component-wrapper .lock-code:hover {background-color: #f9fafc;}.component-wrapper .lock-code:hover>.lock-code-word {color: #409eff;
}.component-wrapper .lock-code:hover>.icon-down {fill: #409eff;
}.component-wrapper .lock-code .icon-down {transform: translateX(0px);transition: all .1s;
}.component-wrapper .lock-code .lock-code-word {font-size: 0px;margin-left: 15px;display: inline-block;transition: all .1s;opacity: 0;
}::-webkit-scrollbar {width: 8px;background-color: #f5f5f5;
}::-webkit-scrollbar-thumb {border-radius: 6px;background-color: #ccc;
}::-webkit-scrollbar-track {border-radius: 6px;background-color: #f5f5f5;
}

• mixin.js

export default {data () {return {//每一个区域的高度codeParent: [],codeHeightArr: [],//每个区域的显示状态isShow: [],}},methods: {//根据子元素的高度 设置代码区域父元素的高度showCode (index) {this.$set(this.isShow, index, !this.isShow[index])this.$nextTick(() => {if (this.isShow[index] === true) {this.codeParent[index].style.height = +this.codeHeightArr[index] + 25 + 'px'} else {this.codeParent[index].style.height = 0}})},//得到所有代码区域的高度getCodesHeight () {const arr = document.getElementsByClassName('code-content-height')this.codeParent = document.getElementsByClassName('code-content')const arrLength = arr.lengthfor (let i = 0; i < arrLength; i++) {this.codeHeightArr.push(arr[i].getBoundingClientRect().height)this.isShow.push(false)}},},mounted () {//异步获取当前组件内部 code区域的高度 以便于给点击的时候使用this.$nextTick(() => {this.getCodesHeight()})},
}

components

• sl-button.md

# Button 按钮
常用的操作按钮
## 基础用法
基础的按钮用法<ClientOnly> 
<div><sl-button></sl-button>
<slButton></slButton>
</div> 
</ClientOnly>

get-started

• README.md

---
title: 快速上手
---## 安装请参考 [安装](../install/) 章节## 单个引入## 全局引入

guide

• README.md

---
title: UI
---# UI👀 介绍- 本 UI 框架是基于 Vue 2 实现的。📌 项目特点- UI🔮 视觉稿- UI🚲 为什么叫   UI- UI

install

• README.md
  • \ 需去掉

---
title: 安装
---# 安装推荐安装  xxx@版本\```bash
npm install xxx@版本
\```
或
\```bash
yarn add xxx@版本
\```

README.md

---
home: trueactionText: 快速上手 →
actionLink: /guide/
features:
- title: 简易好学details: 基于 VUE2
- title: Vue 驱动details: 享受 Vue 的开发体验，实践最流行的技术。
- title: s-uidetails: s-ui
footer: Sun 2294073848@qq.com
---