vue組件庫使用示例分析
本篇內(nèi)容主要講解“vue組件庫使用示例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue組件庫使用示例分析”吧!
成都創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):聯(lián)通機(jī)房服務(wù)器托管,成都服務(wù)器租用,聯(lián)通機(jī)房服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。
完整項(xiàng)目目錄結(jié)構(gòu)
git clone到本地安裝依賴后，執(zhí)行npm run serve進(jìn)行本地組件庫開發(fā)，npm run docs:dev進(jìn)行組件庫官網(wǎng)開發(fā)。一般在src/demo.vue進(jìn)行單個(gè)組件測(cè)試通過后，再引入到.vuepress/components中放入組件庫官網(wǎng)。
├─docs // vuepress開發(fā)目錄
│ ├─.vuepress
│ │ ├─components // 在markdown中可以使用的vue組件
│ │ ├─dist // vuepress打包目錄
│ │ │ ├─assets
│ │ │ │ ├─css
│ │ │ │ ├─img
│ │ │ │ └─js
│ │ │ ├─components
│ │ │ │ ├─basic
│ │ │ │ ├─form
│ │ │ │ ├─navigation
│ │ │ │ ├─notice
│ │ │ │ └─other
│ │ │ └─guide
│ │ │
│ │ ├─config.js // vurepess配置修改入口,包括左邊sidebar,右上方nav導(dǎo)航菜單,favicon等
│ │ ├─style.style // 覆蓋vuerpress默認(rèn)主題樣式
│ │ └─public //公共資源入口，如favicon
│ ├─static
│ │ ├─img
│ │ └─js
│ └─views // vuepress視圖文件，格式是markdown
│ ├─components
│ │ ├─basic
│ │ ├─form
│ │ ├─navigation
│ │ ├─notice
│ │ └─other
│ ├─design
│ │ └─color
│ └─guide
├─src // 組件庫源碼目錄
│ ├─button
│ ├─cascader
│ ├─collapse
│ ├─container
│ ├─datepicker
│ ├─form
│ ├─icon
│ ├─layout
│ ├─notice
│ ├─plugins
│ ├─slide
│ ├─tab
│ ├─step
│ ├─sticky
│ └─index.js // 組件庫源碼組件入口文件,執(zhí)行npm run build的目標(biāo)文件
├─package.json // 與npm發(fā)布相關(guān)，記錄版本號(hào)，包入口文件地址
學(xué)習(xí)組件庫制作會(huì)收獲
學(xué)習(xí)組件封裝技能，良好的接口設(shè)計(jì), 掌握組件設(shè)計(jì)套路
夯實(shí)js/css基礎(chǔ)
深入對(duì)vue的理解
制作流程
組件設(shè)計(jì)/開發(fā)
發(fā)布npm
制作官網(wǎng)展示
組件設(shè)計(jì)/開發(fā)
頻繁涉及到的vue api包括
$children ： 獲取當(dāng)前組件子組件。
$parent： 獲取當(dāng)前組件父組件。
$options: 用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng), 可以用此選項(xiàng)獲得組件的name。
$refs： 一個(gè)對(duì)象，持有注冊(cè)過 ref 特性 的所有 DOM 元素和組件實(shí)例。
$el: Vue 實(shí)例使用的根 DOM 元素。
provide & inject ：這對(duì)選項(xiàng)需要一起使用，允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,注意不是響應(yīng)式的。注入的對(duì)象可以是個(gè)vue實(shí)例的eventBus。
$on： 組件監(jiān)聽自定義事件。
$emit： 組件觸發(fā)自定義事件。
.sync：語法糖，單向數(shù)據(jù)流中，父組件監(jiān)聽到子組件修改props的意圖后父組件修改傳入的props，用了.sync不需要顯式在父組件監(jiān)聽組件內(nèi)部觸發(fā)的自定義事件去修改值, 父組件只要寫:x.sync="bindValue", 注意此時(shí)子組件觸發(fā)的事件必須是"update:x"此語法糖才生效。
updated 生命周期鉤子函數(shù)，由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子, 在父子組件通信可能用到。
beforeDestoryed/ destory 生命周期鉤子函數(shù)，destory后組件的所有的事件監(jiān)聽器會(huì)被移除。注意:如果是自己在組件內(nèi)部對(duì)dom增加了事件監(jiān)聽，組件銷毀的時(shí)候需要自己手動(dòng)接觸自己另外添加上去的監(jiān)聽程序。而且組件銷毀，dom元素還被保留在頁面，需要手動(dòng)清除，可以調(diào)用原生js api, node.remove()清除dom節(jié)點(diǎn)。
原生js api包括：
target.addEventListener(type, listener[, useCapture])/removeEventListener 由于這是 DOM2 規(guī)范的基本內(nèi)容，幾乎所有瀏覽器都支持這個(gè)，而且不需要特殊的跨瀏覽器兼容代碼。
Node.contains()返回的是一個(gè)布爾值，來表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。多用于事件監(jiān)聽判斷是否點(diǎn)擊了目標(biāo)區(qū)域。
window.scrollY 獲取文檔垂直方向的滾動(dòng)距離。
Element.getBoundingClientRect() 返回元素的大小及其相對(duì)于視口的位置，返回一個(gè)對(duì)象，包括width/height/left/right/top/bottom。多用于計(jì)算定位。
技術(shù)點(diǎn)總結(jié)
組件設(shè)計(jì)的思想包括單數(shù)據(jù)流/ eventBus事件中心，核心是組件通信。
單數(shù)據(jù)流: 數(shù)據(jù)的改變是單向的，即通過props的方式，只能讓父組件來修改數(shù)據(jù)，子組件不能主動(dòng)修改props。這樣的例子如在collapse/tab/slide組件中，讓父組件來控制選中的值。單向數(shù)據(jù)流的思想讓數(shù)據(jù)修改更好設(shè)計(jì)，邏輯更加清晰。
vue插件開發(fā)：什么時(shí)候用插件開發(fā)?當(dāng)組件不是顯式在代碼中被調(diào)用，不是直接寫在template中，而是通過調(diào)用Vue原型鏈上的方法被掛載到文檔中。
比如modal模態(tài)框/toast彈窗。插件設(shè)計(jì)的基本思路是暴露一個(gè)install方法，這個(gè)方法中在vue原型鏈上增加一個(gè)自定義的方法X， X中引入組件a，通過Vue.extend(a)獲得組件構(gòu)造器Constructor, 在通過new Constructor({propsData})獲得組件實(shí)例vm, 再掛載組件實(shí)例到文檔中。
import modal from '../notice/modal'
export default {
install (vue, options) {
const Construtor = vue.extend(modal)
let modalVm // 保證全局只有一個(gè)modal實(shí)例
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
}
}
}eventBus：什么時(shí)候用eventBus?當(dāng)狀態(tài)的變化需要多個(gè)子組件被通知。如tab組件中，當(dāng)選中的值發(fā)生變化，tab-head需要感知變化讓提示的短線做個(gè)動(dòng)畫滑到選中的標(biāo)簽下，tab-item需要感知變化讓文字變成選中樣式，tab-pane需要感知變化讓選中的面板出現(xiàn)。
遞歸：在級(jí)聯(lián)組件的設(shè)計(jì)中用到。類似函數(shù)fn中用setTimout(fn,millseconds)調(diào)用自己實(shí)現(xiàn)setInterval的遞歸效果。組件只要內(nèi)部提供name屬性，就可以遞歸地調(diào)用自身。允許組件模板遞歸地調(diào)用自身。通過提供 name 選項(xiàng)，便于調(diào)試，在控制臺(tái)可以看到可以獲得更有語義信息的組件標(biāo)簽。
媒體查詢 &flex布局：響應(yīng)式布局的原理是媒體查詢和百分比布局，介于某個(gè)尺寸的時(shí)候某個(gè)類名生效;跟布局相關(guān)的大部分用到flex,非常好用。詳細(xì)看阮一峰老師教程
| 組件類型 | 組件 | 單數(shù)據(jù)流 | vue插件開發(fā) | eventBus | 原生js操作dom & 事件 | 遞歸 | 媒體查詢&flex布局 |
|---|---|---|---|---|---|---|---|
| 基礎(chǔ) | button按鈕 | - | - | - | - | - | - |
| 基礎(chǔ) | icon圖標(biāo) | - | - | - | - | - | - |
| 基礎(chǔ) | grid網(wǎng)格 | - | - | - | - | - | yes |
| 基礎(chǔ) | layout布局 | - | - | - | - | - | yes |
| 表單 | input輸入框 | - | - | - | - | - | - |
| 表單 | cascader級(jí)聯(lián)選擇器 | yes | - | - | - | yes | - |
| 表單 | form表單 | - | - | - | - | - | - |
| 表單 | datepicker日期選擇器 | - | - | - | yes | - | - |
| 導(dǎo)航 | tab標(biāo)簽頁 | - | - | yes | - | - | - |
| 導(dǎo)航 | step步驟調(diào) | - | - | - | - | - | - |
| 通知 | toast提示 | - | yes | - | yes | - | - |
| 通知 | popover彈出框 | - | - | - | yes | - | - |
| 通知 | modal模態(tài)框 | - | yes | - | yes | - | - |
| 其他 | collapse折疊面板 | yes | - | yes | - | - | - |
| 其他 | slide輪播圖 | yes | - | - | - | - | - |
| 其他 | sticky粘滯 | - | - | - | - | - | - |
組件設(shè)計(jì)三要素
props：可以參考餓了么或者antd, 需要從用戶的角度考慮怎么使用方便和擴(kuò)展性好，一般需要校驗(yàn)類型和有效值，設(shè)置默認(rèn)值。
slot：插槽內(nèi)容分發(fā)，使用作用域插槽讓slot也可以獲得組件內(nèi)部方法，讓用戶自定義的內(nèi)容頁能調(diào)用組件內(nèi)部方法，比如popover彈出框中用戶想自己加個(gè)按鈕手動(dòng)調(diào)用關(guān)閉。
event: 組件事件。從用戶角度考慮，比如datepicker組件中用戶想在日期面板被打開或這關(guān)閉的時(shí)候進(jìn)行操作。這種一般用在交互類UI組件。
舉個(gè)例子
復(fù)雜組件datepicker開發(fā)思路
1、在原有的popover組件上開發(fā)
點(diǎn)擊一個(gè)元素A(輸入框)后可以彈出元素B（日期面板）
2、生成日期面板
生成7*6=42個(gè)日期，6行是為了確保一個(gè)月都能在面板上完整顯示。這里計(jì)算最方便的做法是用時(shí)間戳，計(jì)算出這個(gè)月第一天時(shí)間戳和這一天周幾，就可以一次性計(jì)算出這42個(gè)日期。不用算上個(gè)月下個(gè)月分三段算，這樣的問題是還要考慮邊界情況，如剛好出現(xiàn)上一年下一年等，麻煩容易出bug。這42個(gè)日期我們?cè)赾omputed用visibleDays表示。
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 // 前面需要補(bǔ)多少位
var arr = []
for (let i = 0; i < 42; i++) {
arr.push(new Date(curMonthFirstDay.getTime() + (-x + i) * 3600 * 24 * 1000))
}
return arr
},3、props接受value, 類型是date
日期面板上的日期渲染的時(shí)候加上一個(gè)計(jì)算的class, 分別加上'today','selected-date','available','prev-month','next-month'，進(jìn)行樣式上的區(qū)分
4、實(shí)現(xiàn)選中日期
告訴父組件修改數(shù)據(jù)意圖讓父組件修改傳入的props，對(duì)應(yīng)使用我們組件的時(shí)候使用, 這里的基礎(chǔ)知識(shí)是組件上的v-model是個(gè)語法糖，v-model="x"會(huì)被解析成:value="a" @input="a=$event"。同時(shí)面板上輸入框顯示的數(shù)據(jù)也要跟著變化，所以這里用計(jì)算屬性，如在computed中用formattedValue表示。
formattedValue: {
return this.value instanceof Date ? helper.getFormatDate(this.value) : ''
}5、實(shí)現(xiàn)點(diǎn)擊上一年/月，下一年/月
我們需要知道當(dāng)前展示的是哪一年哪一個(gè)月，這個(gè)數(shù)據(jù)是組件內(nèi)部維護(hù)的，所以在data申明一個(gè)display對(duì)象
display: {
year: (this.value && this.value.getFullYear()) || new Date().getFullYear(),
month: (this.value && this.value.getMonth()) || new Date().getMonth()
}點(diǎn)擊的時(shí)候即修改display對(duì)象的year/month，因?yàn)関isibleDays也是計(jì)算屬性，依賴display對(duì)象，所以點(diǎn)擊上一年/月，下一年/月，渲染的日期也跟著變。
6、實(shí)現(xiàn)選擇年
年面板的制作，生成12個(gè)年，點(diǎn)擊第1（12）個(gè)年渲染出上（下）12個(gè)年。這里只需要給渲染出來的年的第一個(gè)和最后一個(gè)dom元素綁定事件，事件監(jiān)聽程序傳入當(dāng)前點(diǎn)擊的元素的值，即可計(jì)算出上或下一個(gè)12年。
同理點(diǎn)擊年的時(shí)候用$emit通知父組件修改value
7、實(shí)現(xiàn)選擇月
直接寫死12個(gè)月份，同理點(diǎn)擊月的時(shí)候用$emit通知父組件修改value
8、增加住面板上【今天】和【清空】的按鈕
點(diǎn)擊的時(shí)候用$emit通知父組件修改value，new Date()和''
9、細(xì)節(jié)處理
用戶選中完日期后要關(guān)閉面板
用戶選了年后點(diǎn)擊周圍空白區(qū)域日期面板關(guān)閉，第二次點(diǎn)擊進(jìn)來應(yīng)該默認(rèn)展示日面板
10、用戶可以修改輸入框里面的值，需要判斷有效性
有效的話$emit通知父組件改值，無效的話當(dāng)失去焦點(diǎn)的時(shí)候變回原來的值，這里需要用原生js去給input修改value。注意這里直接改formattedValue的話無效，雖然輸入框的值綁定了:value="formattedValue",但是因?yàn)閒ormattedValue是計(jì)算屬性，依賴于this.value，在用戶輸入無效值的情況下this.value不會(huì)改變，因此界面不會(huì)被更新，所以需要手動(dòng)改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、完善
給彈出日期面板和關(guān)閉日期面板增加組件自定義事件, 即調(diào)用$emit觸發(fā)'showDatepicker'和'closeDatepicker'事件。
發(fā)布npm
1、使用vue cli3 的庫模式打包代碼，修改package.json 中的"build": "vue-cli-service build --target lib --name sakura src/index.js"，打包后輸出umd構(gòu)建版本, 參考vue cli。
什么是umd? 統(tǒng)一模塊定義，可以兼容common.js(node端規(guī)范)/ AMD(瀏覽器端規(guī)范)/ ES6(node端不完全支持)等多種模塊化方案，確保代碼在各種環(huán)境下能被運(yùn)行。
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 上注冊(cè)一個(gè)用戶
4、在命令行輸入，注意每次發(fā)布都要修改package.json中的 "version": "0.0.x"，"private"必須設(shè)置成false才能發(fā)布
npm adduser // 提示輸入注冊(cè)的用戶名 npm publish
官網(wǎng)制作
使用vue press
1、在原有項(xiàng)目中使用
# 安裝依賴 npm install -D vuepress # 創(chuàng)建一個(gè) docs 目錄 mkdir docs
在package.json中進(jìn)行腳本配置
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}然后運(yùn)行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: '開發(fā)指南',
collapsable: true,
children: [
'views/guide/install.md',
'views/guide/get-started.md'
]
},
{
title: '設(shè)計(jì)',
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組件
官網(wǎng)中提到，所有在 .vuepress/components 中找到的 *.vue 文件將會(huì)自動(dòng)地被注冊(cè)為全局的異步組件，可以在markdown中引用, vue文件中的代碼高亮我用的是vue-highlightjs 查看這里
4、編寫文檔
由于所有的頁面在生成靜態(tài) HTML 時(shí)都需要通過 Node.js 服務(wù)端渲染，對(duì)于SSR 不怎么友好的組件（比如包含了自定義指令），你可以將它們包裹在內(nèi)置的 ClientOnly 組件中，而且注意因?yàn)槭莝sr,組件內(nèi)部beforeCreate, created生命周期鉤子函數(shù)訪問不到瀏覽器 / DOM 的 API，只能在beforeMount和mounted中調(diào)用。
--- title: 'Basic 基礎(chǔ)' sidebarDepth: 2 --- ## Icon 圖標(biāo) <ClientOnly> <sakura-icon/> <font size=5>Attributes</font> | 參數(shù)| 說明 | 類型 | 可選值 | 默認(rèn)值 | | :------ | ------ | ------ | ------ | ------ | | name | 圖標(biāo)名稱 | string |- | - | | color | 圖標(biāo)顏色, 支持常見顏色和十六進(jìn)制顏色 | string |- | - | </ClientOnly>
5、覆蓋默認(rèn)主題樣式
在.vuepress下新增style.styl進(jìn)行覆蓋。
到此，相信大家對(duì)“vue組件庫使用示例分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)站題目：vue組件庫使用示例分析
網(wǎng)頁路徑：http://sd-ha.com/article32/popesc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 外貿(mào)建站過程中一些問題以及應(yīng)該注意什么 2015-07-07
- 外貿(mào)建站需要多少錢 2015-05-02
- 外貿(mào)建站選美國空間還是香港空間好？ 2022-10-10
- 外貿(mào)建站需要哪些東西 2021-11-15
- 詮釋網(wǎng)站排名的高低與流量多少之間的關(guān)系 2022-06-24
- 第一節(jié). 外貿(mào)建站前必須要了解的網(wǎng)站SEO優(yōu)化知識(shí) 2016-03-02
- 外貿(mào)建站在租賃美國服務(wù)器時(shí)要注意什么? 2022-10-02
- 成都外貿(mào)建站公司哪家好？ 2015-03-21
- 成都網(wǎng)站建設(shè)過程中關(guān)于外貿(mào)建站 2018-06-13
- 外貿(mào)建站9大注意要點(diǎn) 2015-10-03
- 按外貿(mào)建站域名五原則挑選老外喜歡的域名 2015-05-01
- 外貿(mào)建站中的哪些細(xì)節(jié)影響著網(wǎng)站流量？ 2015-06-11