資訊專(zhuān)欄INFORMATION COLUMN
摘要：第一集從零開(kāi)始實(shí)現(xiàn)環(huán)境的搭建工程定位本套工程定位在端針對(duì)的組件庫(kù)名字的由來(lái)是我從年養(yǎng)到現(xiàn)在的一直大金毛是我的吉祥物原因本人上一份工作參與了大型的保險(xiǎn)公司后臺(tái)管理系統(tǒng)的搭建對(duì)的端框架有過(guò)一定的了解感受到了他們真的很強(qiáng)大同時(shí)也存在少許的不足其實(shí)
第一集: 從零開(kāi)始實(shí)現(xiàn)(環(huán)境的搭建)
工程定位:
本套工程, 定位在pc端針對(duì)vue的ui組件庫(kù)
名字的由來(lái)
cc是我從2015年養(yǎng)到現(xiàn)在的一直大金毛, 是我的吉祥物!
原因:
本人上一份工作參與了大型的保險(xiǎn)公司后臺(tái)管理系統(tǒng)的搭建, 對(duì)vue的pc端ui框架有過(guò)一定的了解, 感受到了他們真的很強(qiáng)大同時(shí)也存在少許的不足, 其實(shí)從3月份開(kāi)始就想寫(xiě)一套自己的ui框架, 但是無(wú)奈趕上996工作制與項(xiàng)目上線還有其他的事情干擾, 拖到現(xiàn)在才正式開(kāi)始這個(gè)工程, 本工程大部分是受到了element-ui的啟發(fā), 通過(guò)閱讀element的源碼使我受益匪淺!
目的:
通過(guò)編寫(xiě)本套組件, 不斷的細(xì)化自己的知識(shí)體系, 掃除知識(shí)盲區(qū), 建立良好的面向接口的思想(也就是一切為使用者著想), 與此同時(shí)想要認(rèn)識(shí)更多的朋友, 大家一起學(xué)習(xí)一起進(jìn)步, 一起實(shí)現(xiàn)夢(mèng)想!
第一步:
搭建vue的工程這個(gè)環(huán)節(jié)也沒(méi)什么好說(shuō)的, 需要提的幾點(diǎn)是:
1.我采用的css預(yù)處理器為sass.
2.項(xiàng)目中沒(méi)有使用路由功能.
3.測(cè)試選用的是vue官方推薦的jest測(cè)試運(yùn)行器
4.本工程采用模板與樣式分離的形式
① src/style-----------樣式 ② src/components------具體的組件 ③ src/assets----------公共的js文件 ③ test----------------測(cè)試
第二步
現(xiàn)在有了一個(gè)干凈的工程, 我們的目的是把這個(gè)工程打包成組件, 這個(gè)過(guò)程當(dāng)然與我們平時(shí)打包工程的過(guò)程有所不同了, 我也是看了幾篇相關(guān)的文章才明白它的套路, 總感覺(jué)官方說(shuō)的不詳細(xì), 推薦一篇文章講的很好 創(chuàng)建自己的vue-ui組件庫(kù)
第三步
如果你已經(jīng)看了第二步推薦的文章, 相信你很快就能搭建一個(gè)最最簡(jiǎn)易的組件開(kāi)發(fā)環(huán)境了, 我這里介紹一下umd文件, vue 的lib 模式組件的開(kāi)發(fā), 打包出的umd文件是一套兼容文件, 它會(huì)檢測(cè)當(dāng)前環(huán)境的模式是什么, 然后進(jìn)行相應(yīng)的導(dǎo)出, 比如 node規(guī)范 與es6規(guī)范, 所以這個(gè)umd是將各種規(guī)范轉(zhuǎn)換成統(tǒng)一的規(guī)范的模式. 這個(gè)第三步 我是又建立了一套工程, 用于引用當(dāng)前工程, 其實(shí)就是我的技術(shù)博客的官網(wǎng)lulu技術(shù)博客, 這樣就能保證時(shí)時(shí)刻刻模擬使用者, 還能把博客完善哈哈哈哈哈
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103316.html
摘要：第十一集從零開(kāi)始實(shí)現(xiàn)切換組件本集定位我們先來(lái)聊聊切換的意義不管是手機(jī)還是屏幕的大小是有限的人眼睛看到的范圍也是有限的人們看信息的時(shí)候并不喜歡跳轉(zhuǎn)這種操作或是我們要查某個(gè)知識(shí)點(diǎn)進(jìn)入網(wǎng)站之后看了幾眼沒(méi)有需要的相關(guān)信息也就理所當(dāng)然的退出去繼續(xù)搜索 第十一集: 從零開(kāi)始實(shí)現(xiàn)( tab切換組件 ) 本集定位: 我們先來(lái)聊聊 tab 切換的意義, 不管是手機(jī)還是pc, 屏幕的大小是有限的,...
摘要：第三集從零開(kāi)始實(shí)現(xiàn)組件本集定位為什么要叫那因?yàn)槲腋杏X(jué)這個(gè)組件細(xì)節(jié)比較多應(yīng)該會(huì)講很多內(nèi)容所以先把基礎(chǔ)功能在這一集實(shí)現(xiàn)下集去做拓展組件這是一個(gè)基本上每個(gè)工程都會(huì)用到的組件傳統(tǒng)的千篇一律的樣式仿佛按鈕不做的一樣就沒(méi)法用似的我偏要加一些別人沒(méi)加過(guò)的 第三集: 從零開(kāi)始實(shí)現(xiàn)(button組件1) 本集定位: 為什么要叫1那, 因?yàn)槲腋杏X(jué)這個(gè)組件細(xì)節(jié)比較多, 應(yīng)該會(huì)講很多內(nèi)容, 所以先把基礎(chǔ)功...
摘要：第三集從零開(kāi)始實(shí)現(xiàn)組件本集定位為什么要叫那因?yàn)槲腋杏X(jué)這個(gè)組件細(xì)節(jié)比較多應(yīng)該會(huì)講很多內(nèi)容所以先把基礎(chǔ)功能在這一集實(shí)現(xiàn)下集去做拓展組件這是一個(gè)基本上每個(gè)工程都會(huì)用到的組件傳統(tǒng)的千篇一律的樣式仿佛按鈕不做的一樣就沒(méi)法用似的我偏要加一些別人沒(méi)加過(guò)的 第三集: 從零開(kāi)始實(shí)現(xiàn)(button組件1) 本集定位: 為什么要叫1那, 因?yàn)槲腋杏X(jué)這個(gè)組件細(xì)節(jié)比較多, 應(yīng)該會(huì)講很多內(nèi)容, 所以先把基礎(chǔ)功...
閱讀 3178·2021-11-23 09:51
閱讀 689·2021-10-14 09:43
閱讀 3216·2021-09-06 15:00
閱讀 2412·2019-08-30 15:54
閱讀 2567·2019-08-30 13:58
閱讀 1857·2019-08-29 13:18
閱讀 1385·2019-08-27 10:58
閱讀 522·2019-08-27 10:53
