整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者按：近來似乎涌現(xiàn)了大批優(yōu)秀的設(shè)計(jì)軟件，關(guān)于“設(shè)計(jì)系統(tǒng)”的討論也越來越火，毋庸置疑，這個(gè)話題對(duì)設(shè)計(jì)師和公司來講至關(guān)重要。本文譯自Medium中原作者Chris Bam Harrison（tabcorp設(shè)計(jì)師）中原標(biāo)題為"UX Design Tools for 2018 (For Mac AND PC)"的文章。
我有幸與一個(gè)大型團(tuán)隊(duì)的設(shè)計(jì)師、開發(fā)人員和商業(yè)人員共事。作為一名設(shè)計(jì)師，我接手了很多個(gè)性化、自由感十足的項(xiàng)目，這些項(xiàng)目在不同的設(shè)計(jì)工具和系統(tǒng)中有著不同的需求，所以了解什么作品適合什么樣的工具其實(shí)至關(guān)重要。
由于我既用PC端也用Mac端，所以這兩個(gè)系統(tǒng)中的設(shè)計(jì)軟件個(gè)人大部分都接觸過，選擇性也比較寬泛，在其中發(fā)現(xiàn)了一些好的應(yīng)用也希望能供你參考。本文的推薦都是本人親測(cè)好用的，絕不參雜任何商業(yè)利益。
概念構(gòu)思階段
作為讀者，我知道你前來翻看這篇文章時(shí)抱著對(duì)新鮮應(yīng)用推薦的極大期待，但開篇我還是不得不說，最好的應(yīng)用就是——紙和筆。雖然這個(gè)答案看起來令人失望而草率，但以它們作為整篇文章的引子其實(shí)再合適不過。
紙和筆能很好地保持設(shè)計(jì)師原生的靈感,并有益于設(shè)計(jì)師反復(fù)修改、磨合自己的作品，而不至于桎梏于一些不必要的細(xì)節(jié)中浪費(fèi)時(shí)間。世界上沒有毫無缺憾的設(shè)計(jì)，因此將自己從數(shù)碼設(shè)計(jì)工具中解脫出來很大程度上意味著你不用再被無謂的細(xì)節(jié)拖沓進(jìn)度。
另外，我選擇筆還有一個(gè)原因，那就是：不要使用能夠被擦除的工具。當(dāng)你被某一個(gè)部分絆住腳時(shí)不要停下來，繼續(xù)摸索向前走才能逐漸接近好的預(yù)期。這一條建議從前甚至改變了我的作品軌跡，我的筆記本開始保留很多構(gòu)思時(shí)粗糙的線條，雖然混亂不堪，但使我變得更有效率也更富于創(chuàng)造力，也許不知哪一秒就在粗糙的線條中發(fā)現(xiàn)了自己的靈感。
另一貫徹UX理念的概念就是用戶訪問，對(duì)此我十分鐘愛Whimsical。Whimsical的流程圖制作功能十分強(qiáng)大，而且視覺上一目了然。雖然每月收費(fèi)10美元，但絕對(duì)物有所值，它一向以操作簡(jiǎn)便快捷著稱。
為了尋找靈感，我常去的兩個(gè)網(wǎng)站是Dribbble和Muzli。Dribbble很適合快捷地尋找一些新鮮的，富有創(chuàng)意的點(diǎn)子，尤其是當(dāng)你尋找簡(jiǎn)單的視覺沖擊感時(shí)非常好用，而在尋找系統(tǒng)性的產(chǎn)品邏輯線方面可能稍稍遜色。這個(gè)網(wǎng)站的方便之處在于你可以在上面粉一些你喜歡的設(shè)計(jì)師和作品，并和他們進(jìn)行交流，隨時(shí)隨地保持關(guān)注動(dòng)態(tài)，當(dāng)然這也是一個(gè)監(jiān)管非常良好的社區(qū)，很少會(huì)出現(xiàn)“三俗”創(chuàng)意污染環(huán)境。
Muzli這個(gè)網(wǎng)站中最令我中意的就是它的每周精品匯總和UX互動(dòng)交流會(huì)。這個(gè)網(wǎng)站會(huì)定期更新一些有好點(diǎn)子、非常精彩的文章，令人總能在里面發(fā)現(xiàn)點(diǎn)兒新的東西。
合作共享與版本控制階段
如果你正在團(tuán)隊(duì)中進(jìn)行一個(gè)項(xiàng)目，想要分享工作中的某些創(chuàng)意，拍成照片通過郵箱分享是一個(gè)辦法，但還有一個(gè)方法看起來更便捷，那就是——Zeplin（Mac，PC通用）。Zeplin是一個(gè)很酷的應(yīng)用，它的特色非常鮮明。
首先，分享工作創(chuàng)意和進(jìn)程它非常拿手，你可以邀請(qǐng)合作伙伴共享視頻、下載私人文件并添加評(píng)論對(duì)某個(gè)設(shè)計(jì)品進(jìn)行交流。
其次，當(dāng)你進(jìn)行設(shè)計(jì)時(shí)，該軟件會(huì)生成樣式指南，便于設(shè)計(jì)師擷取十六進(jìn)制值的顏色和樣式。
最后Zeplin是一個(gè)完全以代碼形式傳播設(shè)計(jì)樣品的應(yīng)用。這一點(diǎn)下面會(huì)有所提及。
總之，Zeplin對(duì)版權(quán)持有者非常有價(jià)值，但倘若多個(gè)設(shè)計(jì)師一同合作怎么辦呢？這時(shí)每個(gè)人都需要版本控制。版本控制是一個(gè)日常中不常見的術(shù)語，指的是一種軟體工程技巧，籍以在開發(fā)過程中確保由不同人所編輯的同一檔案都得到更新，但這個(gè)問題Zeplin就很難解決了。
為此Trunk(Mac端）能很好地解決這一問題。
對(duì)設(shè)計(jì)師而言，Trunk是實(shí)打?qū)嵉纳缃痪幊碳按a托管軟件。你可以在Trunk設(shè)置好需要關(guān)注的文檔，它會(huì)實(shí)時(shí)觀測(cè)它們的變化，當(dāng)發(fā)生更改時(shí)，Trunk會(huì)記錄其中的變化，同時(shí)更改者也可以更新評(píng)論做出解釋，讓用戶知道為什么要這么做。
Trunk的這一屬性對(duì)設(shè)計(jì)師合作團(tuán)隊(duì)來說無疑是福音，因?yàn)樵僖膊槐負(fù)?dān)心其中未知的改動(dòng)而不知道緣由。設(shè)計(jì)師甚至可以以回滾的方式將文檔返回到變化前并重新處理其中矛盾的部分，這是其最大的魅力所在。
注意：Trunk僅與Sketch和PS圖象處理軟件文件兼容。對(duì)于Figma用戶來說，F(xiàn)igma實(shí)際上內(nèi)置了一些輕型版本控制功能。
框架圖及初期設(shè)計(jì)階段
在你的創(chuàng)意與團(tuán)隊(duì)分享之后，大家都想見到該內(nèi)容大體的情況，這時(shí)該用什么呢？
在此我將分享一些基礎(chǔ)的框架圖制作軟件，這里的目的是大致描繪一下一些應(yīng)用的用途，供讀者快速參考。
在此又與我們的老朋友Whimsical見面了，它不僅有強(qiáng)大的流程圖制作功能，也有異想天開的框架圖設(shè)計(jì)功能。事實(shí)上，你可能并不需要一個(gè)專用的線框應(yīng)用程序。在這個(gè)方向上，傳統(tǒng)的筆和紙會(huì)做得很好，像Sketch或Figma這樣的設(shè)計(jì)工具也能勝任。那么為什么要使用Whimsical呢——總結(jié)一句，那就是它干起來真的非常快、非常有趣。
Whimsical有一個(gè)內(nèi)置的低保真度的組件庫：從按鈕、到復(fù)選框、到文本輸入框、到滑塊、到標(biāo)簽條等等，一切都一目了然。所有組件都在智能向?qū)线\(yùn)行，有點(diǎn)兒像樂高拼圖。抓取幾個(gè)基本組件，把它們放在一起，很快就會(huì)有一個(gè)粗略的整體布局。這對(duì)于構(gòu)建設(shè)計(jì)師的設(shè)計(jì)草圖和初期理念是一個(gè)非常快捷、保真的辦法。
同時(shí)，Whimsical也支持社群共享活動(dòng)，在此設(shè)計(jì)師可以將自己的作品發(fā)送給合作伙伴從而得到反饋。
看到上面兩個(gè)圖標(biāo)你是不是馬上熟悉起來了，沒錯(cuò)，它們就是大名鼎鼎的Sketch君和Figma君。它們隨處可見，也許大家對(duì)它們的應(yīng)用已經(jīng)了如指掌了，但這里還是有一個(gè)很實(shí)用的小建議：制作（或下載）線框工具包。雖然線上的圖片已經(jīng)很精美了，但總不如自己制作出來的有趣。我們稍后將詳述這兩個(gè)軟件，不過有一條恒定的標(biāo)準(zhǔn)來評(píng)價(jià)好用與不好用，那就是：簡(jiǎn)單快捷。
原型設(shè)計(jì)階段
原型能夠很好地展示你的作品在早期應(yīng)用時(shí)該如何操作及會(huì)出現(xiàn)什么問題。市場(chǎng)上的原型應(yīng)用程序有很多，在此我將推薦幾款個(gè)人比較中意的。
個(gè)人認(rèn)為，Atomic是一個(gè)很偉大的發(fā)明。之所以如此認(rèn)為，是因?yàn)橐粋€(gè)特殊的理由：Atomic支持原創(chuàng)者將自己的設(shè)計(jì)邏輯編程入原型中，這意味著即使表面上看起來不像本來設(shè)計(jì)的樣子，但在運(yùn)行中卻會(huì)完完全全地遵照設(shè)計(jì)師地本意。
接下來要說的是 Flinto（Mac端），F(xiàn)linto以“什么都會(huì)一點(diǎn)兒”而自薦，算是個(gè)“百事通”，但其中最厲害的就是交互動(dòng)畫設(shè)計(jì)功能了。在Flinto中，滾動(dòng)交互、復(fù)雜過渡和微交互的操作都十分便捷，該軟件同時(shí)也支持嵌入視頻或GIF，這樣設(shè)計(jì)師就可以在原型中使用現(xiàn)有的動(dòng)畫資源。
綜上，如果想要做出真正的高保真互動(dòng)設(shè)計(jì)和動(dòng)畫，那么Flinto算是再好不過的模擬器了。
最后勉強(qiáng)提及一下InVision吧。我不是它的粉絲，因?yàn)閭€(gè)人感覺相對(duì)于產(chǎn)品設(shè)計(jì)支持，InVision把更多的精力投放在商業(yè)宣傳上。不過它在生成快速共享的HTML原型并進(jìn)行即時(shí)修改方面還是非常強(qiáng)大的。
InVision確有所長(zhǎng)，但個(gè)人更偏愛Atomic。事實(shí)上，如果你不想使用Atomic，并且傾向于InVision，也可以考慮一下Figma或Sketch。首先，它們都支持基本的可點(diǎn)擊原型，這些原型可以與用戶共享并進(jìn)行評(píng)論。其次，它們都不專長(zhǎng)于滾動(dòng)交互和高級(jí)動(dòng)畫定制之類的操作，但對(duì)于制作一個(gè)簡(jiǎn)單的原型來說也足矣。
高保真設(shè)計(jì)階段
這個(gè)部分比較籠統(tǒng)，我會(huì)盡可能簡(jiǎn)潔地介紹，因?yàn)橛行┊a(chǎn)品上文已經(jīng)提到過了。
Figma(Mac端，PC端）是我的必選之一，不為別的，就為它能在PC端使用。當(dāng)然除了平臺(tái)效應(yīng)，它還有很多其他優(yōu)點(diǎn)。
個(gè)人比較青睞Figma的鋼筆工具，它操作十分便捷，尤其是在我想以像素規(guī)模制圖時(shí)。Figma的組件覆蓋處理起來也非常得心應(yīng)手，在對(duì)話框面板中，F(xiàn)igma呈現(xiàn)出的不是單一的文本框，而是支持快捷修改的圖層，并可將更改視為重寫，這個(gè)功能比Sketch更容易，操作起來也更富有變化性。
最重要的是，F(xiàn)igma是一款很好的協(xié)作工具，有時(shí)甚至不僅僅是“工具”。在Figma中合作就像打開文件直接更改一樣簡(jiǎn)單。因?yàn)樗牟僮魇腔谠频模臋n中的每個(gè)人都可以看到進(jìn)行中的變化，而且能夠完全無縫對(duì)接。
最后要說的是，F(xiàn)igma的原型搭建和共享工具對(duì)于編程而言十分出彩，由于原型基于HTML語言，所以設(shè)計(jì)師可以和任何人分享創(chuàng)意。更何況它還是免費(fèi)的呢！
重頭戲 Sketch（Mac端）終于登場(chǎng)了。至于Sketch為什么在屏幕設(shè)計(jì)中如此流行其實(shí)一點(diǎn)也不稀奇。當(dāng)Bohemian推出該產(chǎn)品時(shí)，市場(chǎng)上根本沒有類似的精品。由于大量的插件和資源支持，Sketch是UX軟件中無可爭(zhēng)議的王者。
近期，Sketch的開發(fā)進(jìn)程確越來越緩慢，在其最近更新的版本中著重推出的原型搭建功能其實(shí)已經(jīng)被InVision收入囊中了。此外多年來Sketch還是只有Mac端的版本，這使得PC端的用戶很苦惱啊。
報(bào)告和文檔編繪階段
如果你的點(diǎn)子背后有一些好的想法及一些不錯(cuò)的藝術(shù)品作支撐，那么無論你是外包，還是在專業(yè)工作室工作，抑或是在大公司設(shè)計(jì)部門工作，下一步都是一樣的，那就是要推銷自己。
不過很多設(shè)計(jì)師貌似都沒把這一點(diǎn)當(dāng)回事兒，好像大多人認(rèn)為總有人給介紹，或者自己的作品本身已經(jīng)夠有說服力了。但實(shí)際上，好作品的創(chuàng)意只有設(shè)計(jì)師本人才能宣傳出來。
為了進(jìn)行適當(dāng)炒作或者加大宣傳效果，我一般會(huì)選擇蘋果的Keynote工具（Mac端）。曾有大型公司內(nèi)部人士告訴我：商業(yè)人士都喜歡幻燈片。
Keynote與PowerPoint、谷歌幻燈片不同，它可以通過一些非常簡(jiǎn)單、功能強(qiáng)大的動(dòng)畫工具進(jìn)行幻燈片放映。設(shè)計(jì)師可以利用這些優(yōu)勢(shì)來真正地講述設(shè)計(jì)背后的故事。
就像版本控制一樣，文檔在設(shè)計(jì)工作中也成了越來越常見的要求，它會(huì)記錄設(shè)計(jì)中所有必要的細(xì)節(jié)，無論是為了商業(yè)營(yíng)銷還是為了供業(yè)內(nèi)人士參考都尤為重要。
在這一點(diǎn)上，我們團(tuán)隊(duì)使用的是Atlassian公司的Confluence。它本質(zhì)上是一個(gè)具有內(nèi)部高級(jí)權(quán)限特性的wiki。設(shè)計(jì)者可以隨時(shí)查看界面屏幕和用戶流，業(yè)務(wù)團(tuán)隊(duì)可以添加接受標(biāo)準(zhǔn)，開發(fā)人員可以使用頁面作為資源來進(jìn)一步理解設(shè)計(jì)師的設(shè)計(jì)邏輯和意圖。
但個(gè)人并不大喜歡這款軟件，因?yàn)楸孔镜挠脩艚缑婧碗y用的導(dǎo)航令人體驗(yàn)有點(diǎn)差。但無論如何，它確實(shí)在我們工作過程中扮演著重要的角色。
當(dāng)然說到文檔不得不提個(gè)人較為中意的Coda.io。Coda的任務(wù)是用一站式商店取代所有的文檔應(yīng)用程序，可以支持豐富的文本文檔、公式、表格、圖表等操作。但個(gè)人認(rèn)為一旦它退出了beta測(cè)試階段，將是一個(gè)巨大的打擊。
對(duì)此，個(gè)人還想說的是，文檔是團(tuán)隊(duì)合作中一個(gè)非常重要的部分。這意味著即使你不在討論現(xiàn)場(chǎng)，你的想法和理念也一直存在，這使得任務(wù)在與其他隊(duì)員的交接過程中也會(huì)產(chǎn)生較少的摩擦。當(dāng)然，事在人為，盡管做成這件事的方法有一萬種，但最關(guān)鍵的還是要開始動(dòng)手。
開發(fā)者切換階段
在項(xiàng)目度過了最艱難的孵化時(shí)期已經(jīng)小有輪廓時(shí)，接下來合作商可能會(huì)問：什么時(shí)候能竣工拿到產(chǎn)品呢？
為解決這個(gè)，我們還是得把目光拉回到Zeplin身上。在項(xiàng)目進(jìn)行中，你的團(tuán)隊(duì)可能使用Zeplin來進(jìn)行一些操作，這是個(gè)能夠快速保持團(tuán)隊(duì)風(fēng)格的好去處，也是一個(gè)存儲(chǔ)和檢索關(guān)鍵資源的地方。
如果你開始發(fā)掘Zeplin中更高級(jí)的開發(fā)屬性，它的閃光點(diǎn)就爆露出來了，比如導(dǎo)出設(shè)計(jì)資源的代碼片段，或者以多個(gè)分辨率導(dǎo)出資源，這些都能真正加快開發(fā)進(jìn)程。這意味著開發(fā)人員不必追著你討要素材來搭建，一切都能馬上傳輸。
為此我們還要再次提到InVision。InVision的運(yùn)行比Zeplin更簡(jiǎn)單，你可以簡(jiǎn)單地突出或標(biāo)明任何對(duì)象、組，InVision便能直接賦予它們屬性。這是一個(gè)確定大小、文字樣式和顏色的好方法。
你也可以導(dǎo)出資源，但是導(dǎo)出設(shè)置需要事先在Sketch中指定（Zeplin也有同樣的限制）。此外，InVision還支持一些代碼導(dǎo)出功能，但如果想在這方面具體比較InVision和Zeplin，可能需要詢問開發(fā)人員。
在這個(gè)問題上，Avocode很值得關(guān)注，因?yàn)樗粌H僅支持Sketch，還支持Figma、Adobe XD和PS圖象處理軟件。它也是為了從設(shè)計(jì)中生成代碼而設(shè)計(jì)的。個(gè)人對(duì)Avocode的經(jīng)驗(yàn)很有限，但是如果開發(fā)者切換是你工作中的重頭，那么Avocode可能值得一試。
結(jié)語
恭喜你，到此我們走完了從早期概念到最終交付的整個(gè)設(shè)計(jì)過程。希望你已經(jīng)發(fā)現(xiàn)了一些能以某種方式提升工作效率的應(yīng)用程序。
不過還是要說，本文最大的缺陷在于并沒有討論研究階段。因?yàn)閭€(gè)人在一個(gè)專業(yè)的設(shè)計(jì)團(tuán)隊(duì)工作，有專門的研究員所以沒有包括這一步。但它是任何好的UX誕生中的一個(gè)非常非常重要的部分，特別是在設(shè)計(jì)和開發(fā)的早期階段。
另一個(gè)要注意的問題是，這里列出的許多工具對(duì)私人而言都是免費(fèi)的，但如果你與多個(gè)項(xiàng)目或團(tuán)隊(duì)合作，就會(huì)變得非常昂貴。如果你有一些很棒的免費(fèi)或者便宜的替代品，歡迎共同分享。
原文鏈接：https://blog.prototypr.io/ux-design-tools-for-2018-for-mac-and-pc-320a7be230c9
編譯組出品。編輯：郝鵬程
https://cn.vuejs.org/index.html
需要你做一下預(yù)習(xí)：https://cn.vuejs.org/v2/guide/index.html
數(shù)據(jù)驅(qū)動(dòng)。如果我們要改變頁面效果，不再需要直接操作dom元素，只需要改變數(shù)據(jù)就好。數(shù)據(jù)改變之后框架會(huì)自動(dòng)的幫我們進(jìn)行頁面更新。
js最初的出現(xiàn)就是為了解決一個(gè)頁面中彈出一個(gè)提示，或者做一個(gè)簡(jiǎn)單的計(jì)算。當(dāng)時(shí)的環(huán)境下，瀏覽器可用的內(nèi)存很小，為了解決這些問題，js語言必須簡(jiǎn)單、沒有太復(fù)雜的數(shù)據(jù)結(jié)構(gòu)、占用內(nèi)存小。
但是隨著時(shí)間的發(fā)展，網(wǎng)頁的功能越來越復(fù)雜，需要的交互越來越多，js需要做的事情就更多。隨著時(shí)代的發(fā)展，瀏覽器的廠家也越來越多，每家瀏覽器對(duì)js語法的支持也不一樣。ECMA這個(gè)組織，建立一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，在不停的制定一些語言語法的規(guī)范。
語言在發(fā)展的過程中，會(huì)吸取或者借鑒一下同行的一些優(yōu)勢(shì)，來完善自身。
為了解決業(yè)務(wù)場(chǎng)景的復(fù)雜化，出現(xiàn)了很多框架或者開發(fā)模式：
jQuery是前期出現(xiàn)的一個(gè)神級(jí)的插件，它提供了一個(gè)標(biāo)準(zhǔn)的元素選擇方案，讓我們可以快速的做元素選擇。選中之后做后序的各種操作。它統(tǒng)一了各個(gè)瀏覽器中js語法的差異，使用jQuery寫代碼就不需要考慮各個(gè)版本瀏覽器中語法的差別
MVC框架Backbone，是早期經(jīng)典的前端開發(fā)框架(jQuery+underscore.js+backbone.js+require.js)；做SPA單頁面應(yīng)用程序開發(fā)
angular.js，是google的。分為兩類：angular.js和angular
react.js，是facebook出的框架，目前是全球使用最廣泛的。國(guó)內(nèi)十家公司的react可能有十種寫法
vue.js，是一個(gè)個(gè)人項(xiàng)目，目前是國(guó)內(nèi)使用比較廣泛的。國(guó)內(nèi)十家公司的vue只能有一種寫法
https://cli.vuejs.org/zh/
npm install -g @vue/cli # 全局安裝vue腳手架，希望你成功剛才我初始化項(xiàng)目時(shí)選擇的內(nèi)容
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No翻譯之后的中文版本
? Please pick a preset: Manually select features(選擇使用手動(dòng)方式創(chuàng)建項(xiàng)目)
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter(我現(xiàn)擇了四項(xiàng)：1. 手動(dòng)選擇vue的版本【必選】，2.安裝babel【必選】，3.css預(yù)處理，后面可以選擇使用sass或者less等預(yù)處理語言，4.選擇了代碼規(guī)范性檢測(cè)，寫代碼不符合規(guī)范時(shí)報(bào)錯(cuò))
? Choose a version of Vue.js that you want to start the project with 2.x(選擇vue2)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)（選擇使用sass）
? Pick a linter / formatter config: Basic（選擇lint規(guī)范性檢測(cè)的基礎(chǔ)配置）
? Pick additional lint features: Lint on save（在保存的時(shí)候檢測(cè)代碼）
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（把每一個(gè)插件的配置文件單獨(dú)放置）
? Save this as a preset for future projects? No（以后都不使用這種配置）npm的配置文件，路徑在windows的c:/users/你的用戶名/.npmrc
registry=https://registry.npm.taobao.org/
init.author.email=你的郵箱
init.author.name=你的名字
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/vue中的路由插件，路由的作用是實(shí)現(xiàn)頁面跳轉(zhuǎn)。簡(jiǎn)單點(diǎn)理解就是再瀏覽器中訪問指定的地址的時(shí)候展示的組件或者頁面內(nèi)容
https://router.vuejs.org/zh/
路由分兩種模式：hash和history
區(qū)別：hash瀏覽器支持性好，不需要做額外的配置，可以直接使用；history模式再發(fā)布的時(shí)候需要做特殊的設(shè)置，在web服務(wù)器上做了配置之后才能使用；hash模式的路由，地址路徑中有#進(jìn)行分割，#后面的表示路徑，history模式中沒有#
npm i vue-router # 安裝路由插件import Vue from 'vue'
import VueRouter from 'vue-router'
// 可以直接再組件中使用router-view和router-link等路由內(nèi)置組件和對(duì)象($route和$router)
Vue.use(VueRouter)
const router=new VueRouter({
routes: [] // 路由表，或者叫路由數(shù)據(jù)，就是我們網(wǎng)文指定地址時(shí)候展示的組件
})參數(shù)傳遞之后，在對(duì)應(yīng)的頁面使用$route屬性可以直接獲取參數(shù)
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB,抽空了看看
beforeEach
afterEach
children
在一個(gè)組件中放多個(gè)router-view,通過name屬性進(jìn)行命名指定
在定義路由的時(shí)候使用components屬性指定展示的組件，可以通過設(shè)置屬性名為router-view的name屬性，屬性值為對(duì)應(yīng)的組件的方式實(shí)現(xiàn)
new Router({
routes: [{
path: '/demo',
name: 'Demo',
components: {
default: ()=>import('.....'),
first: ()=>import('...')
}
}]
})https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
beforeRouteUpdate(to, from, next) {
// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
// 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
// 可以訪問組件實(shí)例 `this`
},https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API
https://vuex.vuejs.org/zh/
vuex是vue中的一個(gè)狀態(tài)管理插件，通俗的講就是一個(gè)全局的數(shù)據(jù)管理工具。作用是實(shí)現(xiàn)項(xiàng)目中數(shù)據(jù)的集中式管理。
vuex是遵循單向數(shù)據(jù)流機(jī)制的：就是數(shù)據(jù)是單向流動(dòng)的，分為三部分(view,state,action)
在view視圖中，通過dispatch派發(fā)一個(gè)action改變數(shù)據(jù)，數(shù)據(jù)改變之后view視圖重新渲染
vuex中的數(shù)據(jù)流向：在組件中通過dispatch派發(fā)一個(gè)action，在action中獲取數(shù)據(jù)，然后通過commit提交一個(gè)mutation改變數(shù)據(jù)，數(shù)據(jù)改變之后組件重新渲染
他們可以接收的參數(shù)為:
mapXxx('命名空間', [數(shù)組])
mapXxx('命名空間', {對(duì)象})
如果沒有命名空間空間參數(shù)，表示獲取根節(jié)點(diǎn)上的內(nèi)容你有沒有用過vuex？
兩種回答方式：
vuex不是項(xiàng)目開發(fā)的時(shí)候必選的一個(gè)插件，但是在需要用的時(shí)候你要知道它的存在，它的作用就是顯示數(shù)據(jù)在不同的組件之間進(jìn)行共享的。
手機(jī)app
管理后臺(tái)
https://lurongtao.gitee.io/felixbooks-interview2/
vue.config.js,所有的相關(guān)配置信息都在vue-cli的官網(wǎng)上:https://cli.vuejs.org/zh/config/#vue-config-js
https://webpack.docschina.org/ webpack官網(wǎng)，作為了解
module.exports={
publicPath: "./", // 表示打包之后資源文件的加載路徑
// 再做性能優(yōu)化的時(shí)候，需要做到
/**
* 1. 路由文件的懶加載,使用 ()=> import('xxx')的方式引入,可以把路由組件單獨(dú)打包成js文件，在需要使用的時(shí)候再引入
* 2. 使用cdn的方式引入第三方資源庫
*
* **/
// configureWebpack，對(duì)webpack工具做額外的設(shè)置
configureWebpack: {
externals: {
// 屬性名是js源代碼中引入的時(shí)候使用的包名，屬性值是引入js文件后再瀏覽器中可以直接使用的名字
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
"element-ui": "ELEMENT",
},
},
// 腳手架內(nèi)置了一個(gè)node的開發(fā)服務(wù)器，可以直接讓我們通過網(wǎng)絡(luò)路徑訪問代碼
devServer: {
// port: 998, // 改變開發(fā)服務(wù)器的端口號(hào)
proxy: {
// 訪問以/api開頭的地址時(shí)做一個(gè)代理轉(zhuǎn)發(fā)
// 代理只有再開發(fā)的時(shí)候有用，打包之后就沒用了
"/api": {
target: "https://papi.jiemian.com/page/api", // 目標(biāo)服務(wù)器
ws: true, // 開啟ws
changeOrigin: true, // 改變origin
pathRewrite: { "^/api": "" }, // 路徑重寫，把/api替換成空白
},
},
},
};
是一個(gè)基于vue語法的服務(wù)器端渲染(SSR)框架。使用vue語法編寫多頁面應(yīng)用程序，就是每一次路由跳轉(zhuǎn)打開的都是一個(gè)新的html文件。它解決了SPA單頁面應(yīng)用程序的一個(gè)通病（最怕刷新）。
https://www.nuxtjs.cn/
yarn是facebook出的一款包管理工具，和npm一樣的功能
https://yarnpkg.com/
安裝使用
npm i yarn -g # 全局安裝yarn
yarn add xx # 安裝模塊，相當(dāng)于 npm i xx
yarn remove xx # 刪除模塊，相當(dāng)于 npm uninstall xx.nuxt打包文件、nuxt.config.js配置文件、package.json依賴配置文件、static靜態(tài)文件放在服務(wù)器
見的css樣式操作
div {
white-space: 'nowrap';
overflow: hidden;
text-overflow: ellipsis;
}我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
-webkit-line-clamp：限制一個(gè)塊元素顯示文本的行數(shù)(number)
設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式：
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}.triangle {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}div {
display: flex;
justify-content: center;
align-items: center;
}div {
box-shadow: 2px 2px 2px 2px #f00 inset;
}border-radius可設(shè)置多個(gè)值；
一個(gè)值：表示四個(gè)圓角都相同；
二個(gè)值：第一個(gè)值為右上和左下圓角的值，第二個(gè)值為右下和左上圓角的值；
三個(gè)值：第一個(gè)值為左上圓角的值，第二個(gè)值為右上和左下圓角的值，第三個(gè)值為右下的值；
四個(gè)個(gè)值：第一個(gè)值為左上圓角的值，第二個(gè)值為右上，第三個(gè)值為右下的值，第四個(gè)為左下圓角的值；
div {
border-radius: 30px;
/*border-radius: 10px 30px*/
/*border-radius: 10px 20px 30px*/
/*border-radius: 10px 20px 30px 40px*/
}div {
text-shadow: 2px 2px 2px #F00;
}div:first-letter{
font-size: 50px;
color:#f00;
........
}div:first-line {
font-size: 50px;
color:#f00;
........
}兼容IE8及以下版本
div{
width: 200px;
height: 200px;
background: #00B7FF;
opacity: 0.5; /*標(biāo)準(zhǔn)游覽器*/
filter: alpha(opacity=50);/*IE低版本 8*/
}div img {
width:100%;
height:100%;
object-fit: cover;
}div::-webkit-input-placeholder {color: #999}
div:-moz-placeholder { color: #999}
div::-moz-placeholder {color: #999}
div:-ms-input-placeholder { color: #999}div{
filter: blur(1px);
}原文鏈接：https://segmentfault.com/a/1190000021509364
作者：FishStudy520
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
