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

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构建版本, 参考vue cli。

什么是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: '/' },
  { text: 'Github', link: 'https://github.com/Firenzia/sakura-ui/' },
  ],
  sidebar: [
   {
    title: '开发指南',
    collapsable: true,
    children: [
    'views/guide/install.md',
    'views/guide/get-started.md'								 
 6/7   首页 上一页 4 5 6 7 下一页 尾页