试映

组件库官方网站

Github地址

如果你喜欢你的小兄弟姐妹给一点明星鼓励，请不要在制作环境中拿来学习交流~ ~

完整的项目目录结构

git clone本地安装后，执行npm run serve开发本地组件库，npm运行docs:dev开发组件库官网。通常，在src/demo.vue通过单组件测试后，会将其引入。vu press/组件并放入组件库官网。

docs//vuepress发展目录 。vuepress组件//可以在markdown中使用的vue组件 dist//vupress包目录资产CSSimgjs组件基本其他指南config.js//vulnerability配置修改入口，包括左侧边栏和导航菜单上的导航菜单favicon et al .style.style//涵盖默认主题风格的vuerpress 公共//公共资源入口，如favicon 静态 img js 视图/。该格式是markdown 组件 基本 表单 导航 通知 其他 设计 颜色组件库源目录按钮级联\\\\\\\\\\\\\\\\\\\\\\ 组件库源代码组件条目文件，用于执行npm运行构建的目标文件package.json //与npm版本、记录版本号和包条目文件地址相关

学习组件库产品将会受益

学习组件封装技巧，良好的界面设计，掌握组件设计套路，夯实js/css基础，深刻理解vue的生产流程

组件设计/开发发布npm制作官网展示组件设计/开发

经常涉及的vue api包括

$children:获取当前组件子组件。$parent:获取当前组件父组件。$ options:是当前Vue实例的初始化选项，可用于获取组件的名称。$refs:保存所有用ref属性注册的DOM元素和组件实例的对象。$el: Vue实例使用的根DOM元素。提供注入：这一对选项需要一起使用，以允许祖先组件向其所有后代注入依赖关系。请注意，它不是反应性的。注入的对象可以是vue实例的事件总线。$on:组件侦听自定义事件。$emit:组件触发自定义事件。sync:语法糖。在单向数据流中，父组件在听取子组件修改道具的意图后修改传入的道具。什么时候？使用sync时，父组件不需要显式地监听组件内部触发的自定义事件来修改值。父组件只需写入：x.sync='bindValue '。请注意，在此语法sugar生效之前，子组件触发的事件必须是“update:x”。更新后的生命周期钩子函数可以用于父子组件通信，该函数是在虚拟DOM由于数据更改而被重新呈现和修补后调用的。在销毁/销毁生命周期钩子函数之前，在销毁之后，组件的所有事件侦听器都将被移除。请注意，如果：将事件监视添加到组件内部的dom中，则在组件被销毁时，有必要手动联系自己添加的侦听器。此外，组件被销毁，dom元素仍然保留在页面上，这需要手动清除。您可以调用本机JSAPI和node.remove()来清除dom节点。本机js api包括：

Addeventlistener (type，listener [，use capture])/removeevent listener因为这是DOM2规范的基本内容，几乎所有浏览器都支持这一点，不需要特殊的跨浏览器兼容代码。Node.contains()返回一个布尔值，该值指示传入的节点是否是该节点的后代节点。主要用于事件监控，判断目标区域是否被点击。获取文档的垂直滚动距离。元素。get Bounding Client Rect()返回元素的大小及其相对于视口的位置，并返回一个包含宽度/高度/左/右/上/下的对象。多用于计算定位。技术要点总结

组件设计的思想包括单数据流/eventBus事件中心，核心是组件通信。

单数据流：的数据变化是单向的，即只有父组件可以通过道具修改数据，子组件不能主动修改道具。例如，在折叠/选项卡/滑动组件中，让父组件控制选定的值。单向数据流的思想使得数据修改设计得更好，逻辑更清晰。Vue插件开发：什么时候用插件开发？当组件没有在代码中被显式调用时，它不会直接写入模板，而是通过调用Vue原型链上的方法装载到文档中。例如，模式模式框/吐司弹出窗口。插件设计的基本思想是公开一种安装方法。该方法在vue原型链中加入用户自定义的方法X，将组件A引入X，通过Vue.extend(a)得到组件Constructor，通过new Constructor({propsData})得到组件实例vm，然后将组件实例挂载到文档中。从导入模式./note/model ' export default { install(vue，Options) {const constructor=vue。extend(modal)let modal VM//确保世界上只有一个modal实例，让最后一个选项vue。原型。$ modal=(选项)={if(最后一个选项！==JSON.stringify(options)) { //！modalVm modalVm=new constructor({ propstadata : options })modalVm。$ mount()document . body . append(modalVm。$el) }最后一个选项=JSON。Stringify(选项)modalvm。isvisible=true}}} eventBus:何时使用eventBus？当状态改变时，需要通知多个子组件。例如，在tab组件中，如果所选值发生变化，tab-head需要感知变化以使提示短线在所选标签下滑动，tab-item需要感知变化以使文本成为所选样式，tab-pane需要感知变化以使所选面板出现。递归：用于级联元件的设计。在类似的函数fn中，使用settimeout (fn，millseconds)来调用自身，实现setInterval的递归效果。只要组件在内部提供name属性，它就可以递归地调用自己。允许组件模板递归调用自己。通过提供名称选项，便于调试，并且可以在控制台中看到可以获取更多语义信息的组件标签。媒体查询的Flex布局：响应布局的原则是媒体查询和百分比布局，类名在一定大小内生效；Flex用于大多数与布局相关的领域，非常容易使用。参见严一峰老师的教程组件类型组件单数据流vue插件开发eventBus原生js操作dom事件递归媒体查询flex布局基本按钮-基本图标图标-基本网格-是基本布局-是表单输入框-表单cascader选择器是-表单表单表单日期选择器日期选择器-是-导航选项卡-是-导航步骤调整-通知toast提示-是-是-通知popover弹出框-是-通知modal模态框-是-是-其他折叠折叠面板是-是-其他幻灯片轮播图片是-其他粘性粘性-组件设计三

道具：可以参考饿了么或者蚂蚁。你需要考虑如何方便地使用它，并从用户的角度很好地扩展它。一般需要检查类型和有效值，设置默认值。槽：槽内容分发。Slot也可以通过使用作用域slot来获取组件的内部方法，这样用户定义的内容页面就可以调用组件的内部方法。例如，用户想要添加一个按钮来手动调用和关闭弹出框。Event:组件事件。例如，从用户的角度来看，在日期选择器组件中，用户希望在日期面板打开或关闭时进行操作。这种UI组件一般用于交互类。例如

复杂构件数据采集器的开发思路

1.在原始popover组件上开发

点击元素A(输入框)弹出元素B(日期面板)

2.生成日期面板

生成7*6=42个日期，6行是为了保证在一个月内可以完整的显示在面板上。这里最方便的计算方法就是用时间戳来计算这个月的第一天和一周的第一天的时间戳，然后一次性计算出这42个日期。不要数下个月，把它分成三段。问题是要考虑边界条件，比如刚好前一年和下一年。麻烦容易引起bug。这42个日期由计算中的可见天数表示。

visibleDays () { let { year，month }=this . display let default obj=new Date(year，MonthFirstDay，28)var curmonth first day=helper . getmonth first day(default obj)var curmonth first day=helper . getday(curmonth first day)==0？7 :帮手。getday (Curmonthfirstdayday)让x=Curmonthfirstdayday-1//var arr=[]for(让I=0；i 42我){arr。push(新日期(curmonthfirstday。gettime()(-x I)* 3600 * 24 * 1000))} return arr }，3。道具接受值，类型是日期。

在日期面板上呈现日期时，添加一个计算类，并添加“今天”、“选定日期”、“可用”、“前一个月”、“下一个月”来区分样式

4.实施选定的日期

告诉父组件修改数据，以便让父组件修改传入的道具，这在使用我们的组件时使用。这里的基本知识是组件上的v-model是一个语法糖，v-model='x '将解析为：value='a' @input='a=$event '。同时，面板上输入框中显示的数据也会发生变化，所以这里使用的是计算属性，比如computed中的formattedValue。

formattedValue: {返回日期的this.value实例？帮手。getformatdate(这。value) :''} 5。单击上一年/月和下一年/月

我们需要知道当前显示的年份和月份。这些数据保存在组件中，所以在数据中声明一个显示对象

display : { year :(this . value this . value . getfullyear())| | new Date()。getFullYear()，Month:(此。value this . value . getmonth())| | new date()。getmonth ()}单击时修改显示对象的年/月。因为visibleDays也是一个计算属性，并且取决于显示对象，所以单击上一年/月和下一年/月将更改呈现日期。

6.实现选择年

年份面板生产了12年。单击第1年(第12年)渲染上(下)12年。在这里，您只需要将事件绑定到呈现年份的第一个和最后一个dom元素，并且事件侦听器可以传入当前单击的元素的值来计算前12年或后12年。同样，当单击年份时，使用$emit通知父组件修改值

7.实现选择月

直接写12个月，点击月份时用$emit通知父组件修改值

8.在面板上添加[今天]和[清除]按钮

单击时，使用$emit通知父组件修改值，即新的Date()和“”

9.细节处理

用户应在选择日期后关闭面板

用户选择年份后，点击周围空白区域的日期面板关闭，第二次点击默认显示日期面板

10.用户可以修改输入框中的值，需要判断有效性

如果有效，$emit通知父组件更改该值；如果无效，它将在失去焦点时变回初始值。这里，您需要使用本机js来修改输入值。请注意，直接在此处更改formattedValue是无效的。虽然输入框的值绑定了：value='formattedValue '，但是因为formattedValue是一个计算属性，并且依赖于此. value，所以如果用户输入无效值，此. value不会改变，所以界面不会更新，所以需要手动改变值。

setvaluemanual($ event){ if(！helper . isvalidate($ event)){ this。$ refs . input rapper . $ refs . input . value=this . is date(this . value)？帮手。getformatdate(这。value) : ' '返回}这个。$ 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 build版本。请参考vue cli。

什么是umd？统一的模块定义可以兼容common.js(节点端规范)/AMD(浏览器端规范)/ES6(节点端不完全支持)等模块化方案，保证代码可以在各种环境下运行。

文件大小Gzippeddist/sakura . UMD . min . js 13.28 kb 8.42 kbdist/sakura . UMD . js 20.95 kb 10.22 kbdist/sakura.common . js 20.57 kb 10.09 kbdist/sakura . CSS 0.33 kb 0.23 kb2，在json包中注明模块条目' main ' : ' dist/sakura . UMD . min . js '。

Name' :' heian-sakura-ui '，' version' :' 0.0.6 '，' private' : false，' main ' : ' dist/sakura . UMD . min . js '，' description' : '

4.在命令行输入，注意每次发布时修改package.json中的' version': '0.0.x '，发布前必须将' private '设置为false

Npm adduser //在官方网站上发布的注册用户名的提示

使用vue印刷机

1、用于原始项目

#安装依赖于NPM install-D vupress #为package.json中的脚本配置创建一个docs目录mkdir docs

{ ' scripts ' : { ' docs : dev ' 3360 ' vue press dev docs '，' docs : build ' : ' vue press build docs ' } }然后运行npm run docs:dev进行访问

2.简单配置

在docs/下创建一个新文件config.js。vuepress

module . exports={ base : '/Sakura-UI/'，title: 'Sakura UI '，description: '来自heian sakura的灵感'，head :[' Link '，{ rel: 'icon '，href: '/favicon.ico' }]，themeconfig : { nav 3:[{ text 3: ' Home '，Link 33: '/' }，{ text 333: ' git使用vue组件

如官网所述，全部*。在中找到了vue文件。vu press/components将自动注册为全局异步组件，可在markdown中引用。vue文件中的代码突出显示了我在这里使用vue-highlightjs查看的内容

4.写文档

由于生成静态HTML时需要通过Node.js服务器呈现所有页面，因此可以将对ssr不友好的组件(如包含自定义指令)包装在内置的ClientOnly组件中。注意，因为是SSR，组件内部的beforeCreate、created生命周期钩子函数无法访问浏览器/DOM API，只能在beforeMount中调用并挂载。

- title: 'Basic basis '侧边栏深度3360 2-# # icon client only sakura-icon/font size=5 attributes/font | parameter | description | type | optional value | default value | | :-| | | | name | icon name | string |-|-| | color | icon color，支持常用颜色和十六进制颜色| string |- |-|/ClientOnly5并覆盖默认主题样式

在下面添加style.styl。用vuepress来掩盖。

6.部署到github

官网上的介绍很明确。点击这里。

在项目的根目录中添加deploy.sh，然后运行。/deploy.sh直接在Windows下的命令行上发布到github页面。

结论

如果你能在这里看到，非常感谢。第一次写文章。希望大家多提意见。组件库中有很多细节需要改进。例如，我没有在其中指定css的类名。大部分组件都是自己测试的，没有检测到复杂或者特殊的场景，很多功能还没有支持。通过在这段时间制作组件库，我自己的技术得到了一定程度的提升。官网的展览融入了我自己的想法和设计。希望大家喜欢~ ~谢谢！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。