少女风vue组件库的制作全过程

import modal from '../notice/modal'

export default {
 install (vue, options) {
 const Construtor = vue.extend(modal)

 let modalVm // 保证全局只有一个modal实例
 let lastOption
 vue.prototype.$modal = (options) => {

 if (lastOption !== JSON.stringify(options)) { //! modalVm
 modalVm = new Construtor({ propsData: options })
 modalVm.$mount()

 document.body.append(modalVm.$el)
 }
 lastOption = JSON.stringify(options)
 modalVm.isVisible = true
 }
 }
}

visibleDays () {
 let { year, month } = this.display
 let defaultObj = new Date(year, month, 28)
 var curMonthFirstDay = helper.getMonthFirstDay(defaultObj)
 var curMonthFirstDayDay = helper.getDay(curMonthFirstDay) === 0 ? 7 : helper.getDay(curMonthFirstDay)
 let x = curMonthFirstDayDay - 1 // 前面需要补多少位
 var arr = []
 for (let i = 0; i < 42; i++) {
 arr.push(new Date(curMonthFirstDay.getTime() + (-x + i) * 3600 * 24 * 1000))
 }
 return arr
 },

 formattedValue: {
 return this.value instanceof Date ? helper.getFormatDate(this.value) : ''
 }

display: {
 year: (this.value && this.value.getFullYear()) || new Date().getFullYear(),
 month: (this.value && this.value.getMonth()) || new Date().getMonth()
 }

setValueManually ($event) {
 if (!helper.isValidDate($event)) {
 this.$refs.inputWrapper.$refs.input.value = this.isDate(this.value) ? helper.getFormatDate(this.value) : ''
 return
 }
 this.$emit('input', new Date($event))
 }

File Size Gzipped

dist/sakura.umd.min.js 13.28 kb 8.42 kb
dist/sakura.umd.js 20.95 kb 10.22 kb
dist/sakura.common.js 20.57 kb 10.09 kb
dist/sakura.css 0.33 kb 0.23 kb

 "name": "heian-sakura-ui",
 "version": "0.0.6",
 "private": false,
 "main":"dist/sakura.umd.min.js",
 "description": "an UI framework based on Vue.js",

npm adduser // 提示输入注册的用户名
npm publish

# 安装依赖
npm install -D vuepress
# 创建一个 docs 目录
mkdir docs

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

module.exports = {
 base:'/sakura-ui/',
 title: 'Sakura UI',
 description: 'Inspiration from heian sakura',
 head: [
 ['link', { rel: 'icon', href: '/favicon.ico' }]
 ],
 themeConfig: {
 nav: [
 { text: 'Home', link: '/' },
 { text: 'Github', link: 'https://github.com/Firenzia/sakura-ui/' },
 ],
 sidebar: [
 {
 title: '开发指南',
 collapsable: true,
 children: [
 'views/guide/install.md',
 'views/guide/get-started.md'
 ]
 },
 {
 title: '设计',
 collapsable: true,
 children: [
 'views/design/color/',
 ]
 },
 {
 title: '组件',
 collapsable: true,
 children: [
 'views/components/basic/',
 'views/components/form/',
 'views/components/navigation/',
 'views/components/notice/',
 'views/components/other/'
 ]
 },
 ]
 }
 }

---
title: 'Basic 基础'
sidebarDepth: 2
---
## Icon 图标
<ClientOnly>
 <sakura-icon/>
<font size=5>Attributes</font>
| 参数| 说明 | 类型 | 可选值 | 默认值 |
| :------ | ------ | ------ | ------ | ------ |
| name | 图标名称 | string |- | - |
| color | 图标颜色, 支持常见颜色和十六进制颜色 | string |- | - |

</ClientOnly>