Vue技術分享會分享什麼

Ⅰ react和vue哪個比較好

vue比較好。

VUE 是iOS和Android平台上的一款 Vlog 社區與編輯工具，允許用戶通過簡單的操作實現 Vlog 的拍攝、剪輯、細調、和發布，記錄與分享生活。還可以在社區直接瀏覽他人發布的 Vlog，與 Vloggers 互動。

隨著手機攝像頭的發展，越來越多的人開始使用手機拍照和攝像。攝像一般來說要比拍照門檻高，但是視頻傳播的信息量又遠大於照片。VUE 就誕生在這樣的背景下，希望用拍照一樣簡單的操作，幫助用戶在手機上拍攝精美的短視頻。

主要功能：

分鏡頭：通過點按改變視頻的分鏡數實現簡易的剪輯效果，而剪輯能夠讓視頻傳達更多的信息。

實時濾鏡：由電影調色專家調制的12款濾鏡供選擇，切換至前置攝像頭會出現自然的自拍美顏功能。

貼紙：支持40款手繪貼紙，還可以編輯貼紙的出現時間。

自由畫幅設置：支持1:1、16:9、2.39:1 三種畫幅的視頻拍攝。

Ⅱ vue是什麼 怎麼用

Vue.js是一套構建用戶界面的漸進式框架，Vue 採用自下向上增量開發的設計，其核心庫只關注視圖層，易於上手，同時vue完全有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。

1、MVVM即model，view，viewmodel，它是數據驅動模式，即所有的一切通過操作數據來進行，而盡量避免操作dom樹。

(2)Vue技術分享會分享什麼擴展閱讀：

vue在web開發、網站製作中的優勢

1、據綁定：vue會根據對應的元素，進行設置元素數據，通過輸入框，以及get獲取數據等多種方式進行數據的實時綁定，進行網頁及應用的數據渲染 。

2、組件式開發：通過vue的模塊封裝，它可以將一個web開發中設計的各種模塊進行拆分，變成單獨的組件，然後通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發。

3、簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

Ⅲ 重慶前端html5分享大型WEB項目不可缺少的幾個模塊

隨著「互聯網+」概念的普及，和移動互聯網技術的成熟，越來越多的公司，需要更加智能、高效、合理、人性化的交互，對web前端的需求也會越來越大，同時由於web前端的技術框架種類繁多，更新也非常快，這樣也需要大量的前端人員進行自己的技能提升。我們在做一個大型項目的時候，需要很多模塊與元素去構建，接下來，重慶前端html5開發培訓為大家分享在一個WEB項目中必不可少的幾個模塊。

一：webpack

什麼是webpack?

為什麼要用webpack?

傳統web開發——在傳統的web開發中，對於各種各樣的資源，我們會通過html中的各種標簽引入，那css資源文件來說，傳統總，通常我們在定義好的css文件夾中創建一個css文件格式的的文件，在裡面定義好的樣式，在html中，通過標簽將css資源引入進來，小型的項目這樣做並沒有什麼大的問題，而且還比較快速。但隨著公司的業務發展擴大，項目的也變得越來越大，這種方式的弊端就慢慢顯現，項目臃腫，維護變得困難。webpack開發——在webpac開發中，通過我們定義好的資源載入規則，面對上面的大型項目時，在我們要新增資源文件，我們不需要再苦苦到幾千行html文件中導入你新增的資源文件，只需要在你定義好的文件夾中新增文件，便可以正式投入到開發中了。這樣的話大大簡化了開發和維護的成本。

二：npm

什麼是npm?

npm(nodejs packages manager)翻譯過來就是node安裝包管理工具，通俗來說，在開發過程總，一些常用的功能和實現，開發人員可以將他們封裝起來，上傳到npm，交給npm管理，其他開發人員變可以npm的命令，見這些封裝好的代碼塊下載到自己的項目中供自己使用，這樣避免了大家重復造輪子的尷尬現象，大大減少了開發難度和時間。

三：vue.js

什麼是vue.js?

在講vue.js之前，先一起來看看jquery，因為很多人都是從jquery轉到vue.js，在轉變的過程中，發現有些人開始學vue.j時候很難寫出一個應用出來，在使用原生的js無論是對節點的獲取，事件的監聽和ajax的處理，都存在兼容的問題，開發過程中必須寫大量的兼容性代碼。而jquery出現正好的解決了這個問題。vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。

vue.js——獨特的一面

讓從jquery轉vue.js的開發人員很詫異的是，vue.js的視圖層和model層是響應，我們只要修改了model層的數據，視圖層會時時顯示最新的數據結果。數據驅動，在DOM思想中，每當我們想操控一樣東西，我們總想去獲取節點，在對這個節點進行操作。而在vue.js中，這種想法是多餘的，我們可以通過控制實例的的數據，來達到我們需要的結果。

vue.js可以做什麼

vue.js只有30多k，相對動不動就300多k的庫來說，這是非常適合來開發H5應用的，結合hbuider的runtime和native.js，開發出來的應用不僅跨平台，而且性能也相當不錯，功能也和native app沒有什麼差異。

重慶中天學校JAVA培訓老師建議畢業生，畢業了不要盲目挑戰，做什麼項目無所謂，關鍵是要有成長機會。大項目小項目沒關系，主要是要能學到東西，不要好高騖遠，不要隨便下結論，不要對重復的工作厭倦，出了問題及時反饋領導，不要怕。

Ⅳ 前端中的Vue是什麼

什麼是vue？Vue.js是一套構建用戶界面的漸進式框架，Vue 採用自下向上增量開發的設計，其核心庫只關注視圖層，易於上手，同時vue完全有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。其實拋開官方的一些不知所雲的說法，簡單來說，在傳統web開發中，我們搭建項目都以html結構為基礎，然後通過jquery或者js來添加各種特效功能，需要去選中每一個元素進行命令，這些內容在簡單的項目中或者不變的項目中還能應付得來，一旦項目改動或者項目工程較大，代碼的修改將是復雜繁瑣的，而這時候用了vue，這些問題都不復存在。在比如一些單網頁製作成的應用程序，一般涉及到數據交互的內容都很多，而應用了vue之後將大大縮減工作量。
如果你想要學好web前端最好加入一個好的學習環境，可以來這個Q群，首先是132，中間是667，最後是127，這樣大家學習的話就比較方便，還能夠共同交流和分享資料
vue在web開發，網站製作中有哪些顯著優勢？1.數據綁定：vue會根據對應的元素，進行設置元素數據，通過輸入框，以及get獲取數據等多種方式進行數據的實時綁定，進行網頁及應用的數據渲染 。2.組件式開發：通過vue的模塊封裝，它可以將一個web開發中設計的各種模塊進行拆分，變成單獨的組件，然後通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發。

Ⅳ 記一次前端技術分享（移動端相關概念講解）

rem 自適應和 vw 自適應

定義：相對單位，相對於根元素 html 的 font-size 大小
rem 是相對於 html 標簽的 font-size 所設定的相對大小的一個相對單位，比如 html 的 font-size 為 750px，則 1rem 在設備上表現為 750px

通用方案：阿里巴巴的 Flexible 方案，html 的 font-size 大小等於頁面寬度 10%，相當於把頁面等於 10 個 rem

簡單方案:頭部嵌入一段 script，根據頁面寬度改變根元素 html 的 font-size 大小，頁面元素的單位用 rem，相當於元素是相對於根元素的 font-size 大小進行自適應變化

例如，設計稿寬度是 750px，當設備寬度為 750px 時，1 個 rem 就是 75px，一個頁面的寬度也就是 10 個 rem,px 轉 rem 公式為： 寬度（px）/rem 基準值（75） ,若用 sass 語法，可以寫個 function 進行 rem 轉換，也可直接用 postcss 插件： px2rem 來轉換

定義：相對於 viewport 窗口的寬度的大小的 1/100
1vw 就代表 1%寬度的 viewport 的寬度，100vw 代表 1 個 viewport 的寬度

使用 vw 做 css 單位，可以不用動態計算 html 元素的 font-size 大小，頁面能根據不同寬度手機做自適應

例如，設計稿寬度是 750px，當設備寬度為 750px 時，1 個 vw 就是 7.5px,一個頁面寬度就是 100vw
同理，計算公式： 寬度（px）/ vw基準值（7.5）
也可以用 postcss 插件（postcss-px-to-viewport）進行計算

vw 兼容方案： https://www.w3cplus.com/css/vw-for-layout.html

em：相對於父元素 font-size 的大小

vh: 相對於 viewport 視口的高度的大小的 1/100

vmin: 相對於 viewport 視口寬度或高度較小值的 1/100

vmax：相對於 viewport 視口寬度或高度較大值的 1/100

vmin 和 vmax 單位是相對於 viewport 視口寬度或高度較大或者較小值的 1/100，也就是說不論橫屏或者視頻，這兩個單位的相對值始終不會變化
用處：當我們不希望橫屏或豎屏改變元素的寬高時，可以用著兩個單位

主流：ios 使用的 webkit，安卓使用的 blink

大概在 05 年左右蘋果開發了 webkit 瀏覽器內核，瀏覽器主流內核就是 webkit，後面安卓也採用 webkit 瀏覽器內核。由於 webkit 初始架構比較簡單，apple 基於原本的 webkit 開發了 webkit2，google 則根據 webkit 內核移植出新的瀏覽器內核 blink（chrome 版本 28 及往後使用該內核），Opera 後期也追隨 google 用上了 blink 渲染引擎

由於不同的瀏覽器會使用不同的內核，最初不同的內核對 css3 樣式的兼容性不一樣，所以存在不同瀏覽器前綴

為兼容不同瀏覽器，使用 autoprefixer 插件，可自動添加瀏覽器前綴(ios8 出現 flex 布局不支持)

webkit 內核大致結構：

相關鏈接：

v8 引擎介紹： https://blog.csdn.net/swimming_in_it_/article/details/78869549

webkit 內核介紹： https://blog.csdn.net/offbye/article/details/40039289

viewport: 手機端瀏覽器的可視窗口大小,用來控制根元素容器的寬高，也就是整個瀏覽器的寬高，不能夠被 css 修改，相當於 html 的一個父元素

相關概念：移動設備有三個 viewport，布局窗口、視覺窗口、理想窗口

布局窗口:可供頁面布局的大小

視覺窗口：在手機端上展示的大小

理想窗口：就等於設備屏幕的大小，也就是視覺窗口的大小

移動端開發常用 meta 標簽來初始化 viewport 的縮放比，讓布局窗口和視覺窗口保持一致

相關鏈接： http://www.w3cplus.com/css/viewports.html

解決方法：
直接針對 dpr 來設置，1/dpr 個像素，比如 dpr 為 2 則設置為 0.5px，或新增一個 1px 寬度的偽類，使用 transform 屬性縮小到 0.5 倍寬度
直接將 meta 頭標簽，設置初始寬度為 1/dpr 倍物理像素，比如 dpr 為 2，則設置為：

此時頁面相當於縮放到了原來 0.5 倍，但是 rem 是相對單位，所有頁面布局和樣式會整體自適應，同時此刻 1px 也對應 1 個物理像素

關於背景圖或者相關的 icon，設計師一般也會提供 2 倍圖甚至是 3 倍圖，也是這個原因，可根據媒體查詢到對應 dpr 是選擇幾倍圖

相關文章： https://www.cnblogs.com/surfaces/p/5158582.html

目的：據頁面的特定寬度來定義特殊的 CSS 規則（這里的寬度也是視口寬度（viewport））

由於 iPhone X 的頂部和底部狀態欄，以及全面屏的普及，會導致全屏的頁面，四個圓角以及底部、頂部被遮住，因此需要根據 iPhone X 做一些適配
iOS 11 為屏幕適配引入了一個十分重要的概念： Safe Area 。

適配方案：
1、將 viewport-fit 通過 meta 標簽設置為 cover ，表示頁面內容填充屏幕

2、使用 css 的 constant() 函數做適配
如果頁面只是簡單的流式布局
ios11 之前使用的是 constant 做適配，ios11 之後使用標準的 env 做適配

3、針對特殊情況單獨處理

參考文檔： https://www.cnblogs.com/lolDragon/p/7795174.html

為減少手機端的首屏渲染時間，一般使用 vue-router 懶載入方案，但頁面跳轉首次訪問會有卡頓現象

可在頁面跳轉中間加一層 loading 組件，此時可以使用 vue 的非同步組件方案來處理

文檔地址： https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81

Ⅵ Vue入坑史，插件系統詳解

在談主題插件之前，我想先引出兩個關於 Vue 的問題，這也是我存在的兩個疑問，希望有人能夠幫忙解答。

如果你比較心急，可以直接跳到 Vue.use源碼解讀 。

這兩個是我最近在開發過程中遇到的問題，也沒有找到相關的答案，希望有誰能夠幫忙解答，在此先行謝過了。

Vue 的插件一般就是用來 擴展Vue的功能 。比如，當需要 Vue 實現 Ajax 請求功能，我們希望通過 this.$get(url) 的形式就可以發送一個 get 請求。那麼，我們就需要給 Vue 的實例添加一個 $get 方法， Vue 實例本身是沒有這個方法的。

Vue 的一些插件：

在創建 Vue 實例之前，通過全局方法 Vue.use() 來使用插件：

是不是很簡單，好像也沒有什麼好說的。

有時候，我們看到某些插件使用起來可能有些不一樣。比如使用 vuex ：

其實本質上還是一樣的，也是通過 Vue.use() 方法注冊插件。只不過它有一個 store 對象，然後並將 store 對象作為 Vue 根實例的屬性，以便組件通過 this.$store 這種形式來訪問。

其實當通過 Vue.use() 注冊插件時，內部會自動調用插件的 install() 方法。也就是說，插件必須要提供一個公開的 install() 方法，作為介面。該方法第一個參數是 Vue ，第二個參數是可選的 options 對象。

總結起來說，插件是一個對象。該對象要有一個公開的 install() 方法，那麼寫起來可能是這樣的：

在 install() 方法中，我們通過參數可以拿到Vue對象，那麼，我們就可以對它做很多事情。

這里直接就看幾個插件的源碼吧，看看他們是怎麼寫的，其實我也是參照了這些源碼才真正弄明白了插件是怎麼一回事。源碼很長，這里只說一些關鍵點。

針對 vue-resource 插件問題，我查看了一下 vue 的源碼，它的源碼是這樣的：

通過源碼，我們知道， Vue插件可以是一個對象或者是一個函數 。只有當插件實現了 install 介面時（有 install 這個函數時），才會調用插件的 install 方法；否則再判斷插件本身是否是一個函數，如果是，就直接調用它。

現在就能很好的解釋 vue-resource 插件的寫法了。好吧，我也是剛剛得知，又長了一點見識。

其實官網也有 說明 ：

寫一篇文章，對別人來說是一種分享，其實對自己來說更是一種提高。因為你要寫好一篇文章，一方面你得盡量保證其正確性，有時候你不得不親自去驗證，另一方面也是對自己所學的知識進行一遍系統的復習和整理。

如果你有時間，我建議你多寫一些技術類文章；如果你實在沒時間寫，那也要多讀讀別人寫的文章。

Ⅶ 電腦培訓分享有哪些常見的web開發技術

隨著互聯網的不斷發展，web前端開發技術的發展有了更多的變化趨勢。下面我們就一起來了解一下，目前比較常見的一些web開發技術吧。

1.Vue.js

就在兩年前，很難想像Vue.js能夠忍受迅猛發展的React系統的競爭。經過深思熟慮且久經時間考驗的Angular是一回事，但是Vue......我們沒想到這個開發環境成為前端技術工具列表中的佼佼者。對於那些不熟悉Vue的讀者，讓我們簡要介紹一下它的制勝之道。

，很容易學習並且擁有靈活的創建前端代碼的環境，這使得代碼編寫的出錯率較低。Vue的開發者EvanYou曾在Angular工作過。他確定後者對於UI的構建而言不必要且繁瑣，他大膽地創建了一個入口門檻很低的前端創建解決方案，因此Vue出現。它旨在幫助那些編程經驗很少的設計人員將所有工作都用於創建功能界面。此外，Vue.js支持聲明式呈現，非同步DOM更新，雙向數據綁定，以及嚴格遵守Web組件規范和HTML模板的簡單集成。

2.Angular

盡管我們在2018年看到的Javascript庫的競爭趨勢直接在Angular和Vue.js之間展開，但前者在來年的實用性不會減少。如果你之前還沒有使用Angular工作(至少是使用Angular2)，那麼你一定要熟悉它的優點。讓我們開始吧。

，這個框架需要Javascript與HTML和CSS。二，它是團隊協作的理想選擇，因為它創建的應用程序可以明確劃分為組件-業務邏輯和前端。這是可能的，因為開發環境是基於MVVM(模型-視圖-視圖-模型)模式下的。三，Angular是創建可擴展應用程序的理想選擇，支持與三方庫的簡單集成。這個框架經常用於構建動態的移動應用，因為它使用了雙向數據綁定，這種方法增加了帶有豐富動畫元素的應用程序的響應能力。

現在，讓我們來討論一下Angular的缺點。一件事情，也是開發人員經常提到的，就是在移動設備上的高耗電量(不過與其他框架相比，通過正確的代碼優化，可以減少這個問題)和高入門門檻(如果你是從頭開始使用Angular開始工作，那麼你要准備好去花費1.5到2個月的時間去學習它的大量文檔)。那些喜歡「簡潔」Javascript編碼的開發者在剛接觸Angular時

3.GraphQL

GraphQL是一種有著奇怪語法的API查詢語言，由Facebook開發者們開發。它的目的是超越傳統的RESTAPIs的功能，同時簡化多個源傳輸的數據集合。

讓我們舉個具體的列子。想像一下，你需要在正在構建的社交網路框架中顯示帖子列表，以及用戶的喜好(點贊、收藏等)。在實現方面，這個例子很簡單，你只需從下一個資料庫端點發出請求。但是，由於這些數據可能來自不同的來源(例如，如果帖子存儲在MongoDB或Redis中)，生成的應用將比舒適的工作慢得多。此外，如果您考慮到，隨著時間的推移，數據的大小會增加，因此需要更多的存儲空間，你會意識到，RESTAPI遲早會耗盡其效率。這就是GraphQL的用武之地，使用GraphQL而不是使用單獨的端點來訪問每個資源。你可以使用單個端點，該端點能夠同時處理涉及多個數據源的復雜查詢。與REST模型相比，GraphQL是一個智能的個人助理，使用你指定的源地址，提供所需的內容。

4.Gatsby

如果你的預算比較緊張，但是同時又希望在你的項目中只使用高級技術，那麼你一定要嘗試Gatsby。Gatsby是KyleMatthews為靜態網站的創建而構建的新型解決方案。

它如何優於同行?與Jekyll，Hugo或Hexo等流行解決方案不同，這個靜態生成器不使用模板，而是信賴於Webpack和React組件(注意React官網本身也是在Gatsby的幫助下編寫的)。因此，你可以獲得自動更新和即時頁面轉換等優勢。從1.0版本開始，Gatsby使用了上面提到的GraphQL。因此，在構建過程，它可以從多個GraphQLAPI中獲得數據，然後使用它們創建一個完全靜態的React客戶端應用程序。現在，讓我們從枯燥的特徵列表轉移到真正的問題，看看Gatsby是否適合你。

5.Storybook

Storybook是開發者在與React打交道過程中一個有用的開源工具。特別是，得虧StoryBook，你可以在獨立的環境中設計和策劃應用程序外的UI組件，並且在創建新的UI組件時它會發生變化。如果這個功能對你來說並不太重要，那麼讓我們考慮一下Storybook將幫助解決幾個嚴重問題的情況。

今天，許多有用的工具支持簡單快速地創建功能性客戶端-伺服器系統，包括著名的Meteor、Firebase、GraphQL和Falcor。電腦培訓http://www.kmbdqn.com/發現所有這些工具使編程過程基礎化，應用程序可快速響應。雖然React及其熱門的重載入功能對於UI創建的開發者來說是一個很大的幫助，但設計階段仍然需大量的時間和編寫不少代碼行。

Ⅷ java課程分享學習的HTML5技術有哪些

隨著這兩年HTML5火爆程度，爭相討論HTML的人也是越來越多。討論的問題也主要圍繞著：「如何區分HTML5開發和前端開發？學習HTML5需要掌握的專業技術有哪些？」今天，java課程http://www.kmbdqn.com/就和大家聊聊！

HTML5，超文本標記語言HTML新標准，主要用於前端開發及游戲製作。從技術本身分析來看，現在完成一些頁面製作、WebAPP、微網站開發以及網頁游戲等，現在都是使用HTML5標准完成的。雖然開發這類的應用其實是以JS為主，但因為HTML5這個概念很流行，所以微網站開發、小游戲開發、WebAPP或是公眾號等應用，很多人都會說使用HTML5開發。

前端開發

前端開發一般指網頁開發，學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發人員的個人技能。了解Unix和Linux的基本知識雖然這兩點很基礎，但是開發人員了解Unix和Linux的基本知識是有益無害的。了解Web伺服器當你對Apache的基本配置，htaccess配置技巧有一些掌握的話，將來必定受益，而且這方面的知識學起來也相對容易。學習Java、DOM、BOM等用建立開發基礎。學習photoshop和Axure等軟體應用，完成頁面UI設計。也要認識一下NodeJS和PHP加上資料庫等這樣的後端語言，方便前後端開發配合;學習HTML5、CSS3、響應式頁面布局、微網站製作等開發移動互聯網的應用。像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發必學的高級技術。

前端包含HTML5

當然，HTML5其實只是前端開發中重要的一部分技術，是現在前端開發的標准組件，特別是在移動端的特效開發、游戲開發，以及APP的開發方向上非常流行。如果把前端開發比作要建設的一座「大廈」，HTML5就相當於「鋼筋水泥」。現在好多人都說開發「XX功能」使用「HTML5」技術，其實理解的有一些問題，他們所說的HTML5其實說的就是前端技術，只不過HTML5這個詞比較活躍也比較流行，所以多數人都將前端技術叫成了HTML5了。

那麼想要學好html5前端開發，那麼需要掌握的專業技術有：

1、前端頁面重構：PC端網站布局、HTML5+CSS3基礎項目、WebAPP頁面布局；

2、JavaScript高級程序設計：原生JavaScript交互功能開發、面向對象開發與ES5/ES6、JavaScript工具庫自主研發；

3、PC端全棧項目開發：jQuery經典特效交互開發、HTTP協議，Ajxa進階與後端開發、前端工程化與模塊化應用、PC端網站開發、PC端管理信息系統前端開發；

4、移動端webAPP開發：Touch端項目、微信場景項目、應用Vue.js開發WebApp項目、應用Ionic開發WebApp項目、應用React.js開發WebApp；

5、混合（Hybrid）開發：各類混合應用開發；

6、NodeJS全棧開發：WebApp後端系統開發；

7、大數據可視化：數據可視化入門、D3.jS詳解及項目實戰。

Ⅸ 餓了么基於Vue2.0的通用組件開發之路

Element：一套通用組件庫的開發之路

Element 是由餓了么UED設計、餓了么大前端開發的一套基於 Vue 2.0 的桌面端組件庫。今天我們要分享的就是開發 Element 的一些心得。

官網：http://element.eleme.io/#/
github：https://github.com/ElemeFE/element

## 設計目的

大部分項目起源都是源於業務方的需求，Element 也是一樣。隨著公司業務發展，內部開始衍生出很多後台系統，UED 部門也接到越來越多的設計需求，分析整個過程，我們發現如下問題：

- 日漸增多的後台產品設計需求
- 設計資源有限，沒辦法支持所有業務線
- 公司內部諸多後台產品使用體驗不一致

於是我們決定：

- 設計一套後台支撐框架，提升後台系統的可用性和一致性
- 套用此框架，即使沒有設計師參與，也能讓產品或開發設計出一套好用的後台系統

## 設計階段

下面簡單說一下設計 Element 經歷的幾個階段。

**了解業務並熟悉公司內各後台產品，尋找業務上的共性問題**
設計的目的是為了業務服務。第一步我們從內部系統開始入手，了解公司內部在使用的各種後台系統，將其組件抽象剝離，尋找共性特徵。

**專注業務組件設計**
總結了公司不同系統不同組件的使用情況後，我們打算從業務組件入手，因為這部份是由公司特殊需求衍生的解決方案，我們認為解決了這些棘手的問題，也能給其他後台產品帶來好的設計引導。

**尋求開發支持**
到這一步，我們開始尋找公司內部的開發團隊，並在這時才得知不同團隊里使用著不同的前端框架，有 Vue、React、Angular 等等。

**與大前端合作**
大前端作為獨立的前端團隊，有能力開發底層的工具去服務不同業務，並且 Vue 也是一套年輕且發展方向很好的一個技術棧。UED 與大前端的合作一拍即合。

**方向轉變，專注於基礎組件**
跟大前端接觸後，才發現最開始的方向並不正確，因為業務變化過快，即使有通用的業務組件，也很難跟上需求的變化，而基礎組件才是所有開發團隊都需要的通用組件。這時候我們開始把方向調整為基礎組件的設計。

**組件交互完成，進行視覺封裝，並搭建主體網站**
前期的設計工作主要是由交互設計師進行設計，等確認完所有組件的功能和交互後，開始進行視覺階段，這中間包括制定顏色、字體等各類規范，也同時進行主體網站的設計。

輸出 UI Kit 文件，統一設計規范

第一版網站設計，此處的「特殊組件」即業務組件。

**網站二次設計**
第一版網站上線後視覺效果並不好，我們內部進行了調整，再次上線後就是大家現在看到的樣子。

設計過程簡單來說就經歷了這幾個階段，如還有問題可以繼續交流，下面進入開發階段。

## 開發目的

- 後台系統缺乏一套完整的基礎組件庫
- Vue 在公司內部是一個比較年輕的技術棧，希望做一些基礎設施的建設
- 提升公司在技術社區的影響力

## 開發流程

進入開發階段後，在總體架構方面我們做了一些嘗試，下面按照時間順序分享給大家：
**如何與設計師進行配合**
經過項目初期開發和設計的磨合，我們提煉了一套組件開發流程：

1. 根據交互稿和視覺稿進行開發，期間與設計師保持溝通
2. 開發完成後自測，之後提交設計師驗收
3. 設計師提出修改意見，根據意見進行修改
4. 完成組件開發，為網站編寫例子和文檔

**如何管理多組件項目**
在開發之初，我們就在思考如何降低組件的耦合度，確保組件可以獨立工作。這樣的目的是可以保證組件可以依賴其他組件、讓用戶只載入其中幾個組件甚至在安裝時只安裝需要的組件。最先想到的做法是一個組件單獨一個倉庫，而組件庫項目就是把組件作為依賴引入。

但是由於人手不足，這樣的機制導致開發太耗時間，每個組件都需要單獨維護和打包，同時還要維護組件庫項目的各依賴的版本號。我們只能另尋方案。後來參考了
[babel](https://github.com/babel/babel) 項目的管理方式：所有子項目放在 `packages/`
目錄里，一個子項目可以當作一個獨立的倉庫。通過 [lerna](https://github.com/lerna/lerna)
來管理子項目的依賴和發布。

結合自身項目的特點以及 babel 的這套機制，我們重構了目錄結構：組件可單獨作為一個項目放在 `packages/`，共用函數放在
`src/` 里。最後的打包結果會將整個組件打包成一個文件、組件分別打包成獨立文件，同時發布時還將發布組件庫和獨立組件，滿足不同用戶的使用需求。

**如何解決自定義主題**
開發一套組件庫就離不開定製主題的需求。類名要足夠友好，盡量避免存在樣式層級嵌套，這樣在直接覆蓋樣式或者單獨寫一套主題都會方便許多。所以我們採用 BEM 的方式管理類名，同時盡可能將屬性值用變數代替，維護一份變數文件便於直接修改變數就能定製一套主題。

考慮到不同用戶的使用習慣，我們沒有選用 Less 或 Sass 之類的有各自風格的預處理器，而是選用了更接近未來標準的 CSS4
風格的語法，用 PostCSS 和整合了 postcss-bem 和 postcss-cssnext 等插件的
[postcss-salad](https://github.com/ElemeFE/postcss-salad) 開發。

為了降低用戶自定義主題的上手成本，我們還提供了命令行工具指導用戶快速自定義一套主題。

**如何提供一份直觀的文檔**
文檔不僅是讓用戶看起來直觀，也要讓編寫者寫起來直觀。所以最簡單的方式是用 Markdown
寫文檔。但是就會產生另一個問題：如何在文檔里寫可運行的示例？常規的做法是把文檔寫在 Vue
文件里，這樣就可以在裡面調用其他組件，但是這樣就違背了寫「直觀」文檔的初衷。

經過幾番嘗試，結合 Vue 的特點。我們寫了一套處理 Markdown 文件的 webpack loader，可以將 Markdown 轉成 Vue 文件，不僅降低了文檔的維護成本，同時也將文檔里運行組件示例變成可能。

**多語言官網如何配置和管理**
Element 在立項之初其實並沒有考慮國際化的問題。項目開源之後，我們陸續收到了一些外國開發者的反饋，希望能夠增加英文文檔。不久之後，國內的一個翻譯團隊主動聯繫到了我們，為 Element 貢獻了整套英文文檔。

有了英文文檔就需要有英文網站，這就需要對官網的現有結構進行修改和升級；同時為了面向未來，需要官網能夠兼容除英語外的其他多語言。為此我們做了以下工作：

1. 路由

官網的路由是根據一個記錄了導航信息的 `json` 文件自動生成的。因此需要在這個 `json` 文件中添加對應於其他語言的欄位，並且根據新的數據結構修改路由生成的邏輯。

2. 頁面

官網中除了文檔外，還有一些介紹性質的頁面。這些頁面中文字比較多，如果人工管理每種語言的頁面，若需要修改則必須去每個頁面相應的位置進行編輯，有些繁瑣。我們的做法是：每個頁面對應一個模板，模板中的文字全部抽取到一個語言配置文件中，並且寫了一個腳本生成最終的頁面。這樣在需要修改時，只需在語言配置文件中編輯對應的欄位即可。

3. 網站組件

對於 `header` 、`footer` 等通用的頁面組件，我們採取了和上面類似的策略。但由於組件內的文字較少，於是沒有再使用模板，而是通過路由判斷應該顯示何種語言。

中英文網站的顯示效果

至此，我們也逐漸完善了技術棧。用 ES2015 和 CSS4 作開發語言、Lerna 負責管理組件、用 Karma 搭配 Mocha 和
Chai 等工具在 Travis CI 里做持續集成測試，最後用 Markdown 結合 Vue 寫文檔。我們甚至還在 CI
里實現了自動部署網站和推送主題倉庫代碼等功能，提升了不少開發效率。

Ⅹ 新手學習前端開發都應該學習哪些知識，心得分享

首先我們要分清前端這部分的分工，一般來講分為：設計和開發。設計是設計師的工作，設計師按照用戶需求出設計圖，他們使用的工具一般是fireworks、Dreamweaver和photoshop這類設計工具，圖片出來後，前端開發就需要按照圖片的設計製作HTML靜態頁面，那麼這就是前端開發的主要工作了。

Web前端工程師是協調前端工程師、後端程序員實現網站頁面活程序的界面美化、交互體驗的IT技術開發人員,需要精通HTML、CSS、JavaScript、jQuery、Ajax等核心的Web前端技術,具備互聯網交互設計能力,熟悉Vue、React、angularjs 等最新的框架。

web前端學習主要包括：HTML、CSS、JavaScript、jQuery、Ajax

HTML：不是編程語言，僅僅是數據格式

CSS：無類型的樣式修飾語言，算弱類型語言；需理解每個元素屬性、樣式等

JavaScript：學習起來相對來說不算太難，入手快

jQuery、Ajax：如果想在前端這塊混的好，這兩門語言一定要掌握（雖然不一定要用，但一定要會）
希望我的回答能幫助到您！加油