年面板的制作，生成12个年，点击第1（12）个年渲染出上（下）12个年。这里只需要给渲染出来的年的第一个和最后一个dom元素绑定事件，事件监听程序传入当前点击的元素的值，即可计算出上或下一个12年。
同理点击年的时候用$emit通知父组件修改value
7、实现选择月
直接写死12个月份，同理点击月的时候用$emit通知父组件修改value
8、增加住面板上【今天】和【清空】的按钮
点击的时候用$emit通知父组件修改value，new Date()和''
9、细节处理
用户选中完日期后要关闭面板
用户选了年后点击周围空白区域日期面板关闭，第二次点击进来应该默认展示日面板
10、用户可以修改输入框里面的值，需要判断有效性
有效的话$emit通知父组件改值，无效的话当失去焦点的时候变回原来的值，这里需要用原生js去给input修改value。注意这里直接改formattedValue的话无效，虽然输入框的值绑定了:value="formattedValue",但是因为formattedValue是计算属性，依赖于this.value，在用户输入无效值的情况下this.value不会改变，因此界面不会被更新，所以需要手动改value的值。
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)) }
11、完善
给弹出日期面板和关闭日期面板增加组件自定义事件, 即调用$emit触发'showDatepicker'和'closeDatepicker'事件。
发布npm
1、使用vue cli3 的库模式打包代码，修改package.json 中的"build": "vue-cli-service build --target lib --name sakura src/index.js"，打包后输出umd构建版本, 参考。
什么是umd? 统一模块定义，可以兼容common.js(node端规范)/ AMD(浏览器端规范)/ ES6(node端不完全支持)等多种模块化方案，确保代码在各种环境下能被运行。
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
2、在package.json指明模块入口"main":"dist/sakura.umd.min.js"
"name": "heian-sakura-ui", "version": "0.0.6", "private": false, "main":"dist/sakura.umd.min.js", "description": "an UI framework based on Vue.js",
3、在npm 上注册一个用户
4、在命令行输入，注意每次发布都要修改package.json中的 "version": "0.0.x"，"private"必须设置成false才能发布
npm adduser // 提示输入注册的用户名 npm publish
官网制作
使用vue press
1、在原有项目中使用
# 安装依赖 npm install -D vuepress # 创建一个 docs 目录 mkdir docs
在package.json中进行脚本配置
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
然后运行npm run docs:dev即可访问
2、简单配置
在docs/.vuepress下新建文件config.js
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: 'https://www.jb51.net/' }, { 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/' ] }, ] } }
3、使用vue组件
官网中提到，所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，可以在markdown中引用, vue文件中的代码高亮我用的是vue-highlightjs 查看这里
4、编写文档
由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，对于SSR 不怎么友好的组件（比如包含了自定义指令），你可以将它们包裹在内置的 ClientOnly 组件中，而且注意因为是ssr,组件内部beforeCreate, created生命周期钩子函数访问不到浏览器 / DOM 的 API，只能在beforeMount和mounted中调用。