騰訊正式開源 QMUI Web 前端框架！

GitHub CSS 科技前端圈前端圈 2017-09-09

經過長時間的打磨迭代，QMUI Web 作為騰訊廣研 QMUI 團隊的一個開源項目，正式發佈到 Tencent Github。QMUI Web 是一個 Web UI 的解決方案，從零開始，由編碼規範，到組件和工具方法的製作，再到工作流的整合，不斷在迭代，也不斷在優化，走過了不少的路。

QMUI Web 是一個專注 Web UI 開發，幫助開發者快速實現特定的一整套設計的框架。框架主要由一個強大的 SASS 方法合集與內置的工作流構成。通過 QMUI Web，開發者可以很輕鬆地提高 Web UI 開發的效率，同時保持了項目的高可維護性與穩健。如果你需要方便地控制項目的整體樣式，或者需要應對頻繁的界面變動，那麼 QMUI Web 框架將會是你最好的解決方案。

更多詳細介紹請見：《騰訊 Web UI 解決方案 QMUI Web —— 探索與沉澱》

開發背景

2014 年中，QMUI 團隊支持的主要項目是 QQ 郵箱，Web 端的郵箱是個龐大的項目，但其並沒有統一的 UI 基礎庫，多年的高速迭代使得項目的 UI 代碼變得混亂，各個模塊之間各自開發，除了在代碼層面表現出混亂和不可控之外，表現層面也並沒有很好地統一起來。因此，項目急需一套統一的團隊編碼規範以及一個 UI 基礎庫。

恰好，這個時候 Sass 等 CSS 預處理器已經發展成熟，自動化工作流的工作模式也日趨完善，因此，我們決定基於這些技術製作一套通用於不同項目的 Web UI 框架。框架的場景定位很明確：需要控制整體樣式，並且可以適應頻繁迭代打磨的大型項目。所以，這套即將誕生的 Web UI 框架的特性也很明確：需要方便地控制項目的整體樣式，應對頻繁的界面變動，並保持項目質量穩健。

此後經過三年的發展，QMUI Web 最終發展為包含編碼規範、樣式工具方法與樣式管理、內置工作流，配套的 GUI 桌面 App，以及擁有完整文檔的解決方案。

功能特性

基礎配置與組件：

通過內置的公共組件和對應的 SASS 配置表，你只需修改簡單的配置即可快速實現所需樣式的組件。（QMUI SASS 配置表和公共組件如何幫忙開發者快速搭建項目基礎 UI？）

SASS 增強支持：

QMUI Web 包含70個 SASS mixin/function/extend，涉及佈局、外觀、動畫、設備適配、數值計算以及 SASS 原生能力增強等多個方面，可以大幅提升開發效率。

腳手架：

QMUI Web 內置的工作流擁有從初始化項目到變更文件的各種自動化處理，包含了模板引擎，雪碧圖處理，圖片集中管理與自動壓縮，靜態資源合併、壓縮與變更以及冗餘文件清理等功能。

擴展組件：

QMUI Web 除了內置的公共組件外，還通過擴展的方式提供了常用的擴展組件，如等高左右雙欄，文件上傳按鈕，樹狀選擇菜單。

應用案例

當前，QMUI Web框架主要用於以下騰訊公司自已的產品中：

工程主頁和源碼地址

工程主頁：http://qmuiteam.com/web/page/index.html

源碼託管：https://github.com/Tencent/QMUI_Web

騰訊正式開源 QMUI Web 前端框架！

相關推薦

'全球首個軟硬件推理平臺：NVDLA 編譯器正式開源'

"原創：HyperAI超神經關鍵詞：英偉達深度學習加速器2017 年，英偉達發佈了深度學習加速器 NVDLA，全稱 NVIDIA DeepLearning Accelerator，以推動在定製硬件設計中採用高效的 AI 推理。在英偉達的開發套件 Jetson AGX X...

編譯器硬件人工智能 GitHub 軟件英偉達深度學習設計 Git 程序員物聯網算法 2019-09-18

'推薦十四款常見的Web前端開發框架以後別隻知道Bootstrap啦'

"在做web開發的時候經常會遇到一個問題，那就是，選擇什麼樣的框架來做前端開發。下面封程中把目前常用的一些前端的框架簡單的給大家介紹一下.1. BootstrapBoostrap絕對是目前最流行用得最廣泛的一款框架如上圖。它是一套優美，直觀並且給力的web設計工具包，可以用...

jQuery Apache 設計 JavaScript Flash 瀏覽器 iOS 技術 CSS HTML Adobe Systems 2019-09-17

'DeepMind開源強化學習遊戲框架，25款線上遊戲等你來挑戰'

"選自GitHub機器之心編譯參與：一鳴、思強化學習算法沒有遊戲訓練？DeepMind 開源 OpenSpiel 平臺了。研究者可在線部署遊戲環境，快速開始實驗。強化學習算法廣為人知的一個應用場景便是遊戲了，通過智能體在多玩家遊戲中的表現，研究者可以更好地調整算法和參數細節...

Python Linux 算法 Swift語言 GitHub Debian Ubuntu 編程語言 Windows 撲克中國象棋 2019-09-03

'《響應式web設計》HTML5、CSS3實踐，適用於各個階段的前端開發者'

"今天檸檬給大家帶來了一本適用於web前端開發各個階段的超級好書——《響應式web設計》pdf電子版。文末附獲取方式本書堪稱學習響應式Web設計的難得佳作。它不僅全面、細緻、圖文並茂地介紹了響應式設計相關的技術，比如媒體查詢、流式佈局、彈性媒體和彈性字體等，還把近幾年來We...

HTML5 設計 HTML CSS 網頁設計技術智能手機腳本語言瀏覽器 2019-08-19

'web前端--10個讓你少走彎路的學習方式，附web學習資料'

"1.前言從事web前端的人很多，每個人的學習方式，學習習慣基本不會一模一樣！關於web前端（或者直接互聯網），大家都知道，是做到老，學到老的一個行業。之前寫文章的時候，我說過很多學習的方式和建議。今天換一下，說一下我個人不建議的學習方式，或者我個人覺得是妨礙進步的學習方式...

jQuery 技術人生第一份工作 HTML5 大學 JavaScript HTML CSS 知乎廣州跳槽那些事兒文章 2019-07-22

'Web前端小白瞭解這些學習祕訣，你也能成為大神'

"新手們有一個常見的錯誤就是猶豫於判斷哪種編程語言是做好的、最該先學的。我們有很多的選擇，但你不能說那種語言“最好”。我們應該理解：說到底，什麼語言並不重要。重要的是理解數據結構、控制邏輯和設計模式。任何一種語言—甚至一種簡單的腳本語言—都會具有所有編程語言都共有的各種特徵...

JavaScript Ruby Bash HTML Google文檔 Linux Google地圖 UNIX CSS 數據庫軟件 Python 程序員腳本語言編程語言 Google PHP Perl Automator Windows AppleScript 瀏覽器 Django jQuery 電腦 Twitter 技術硬件蘋果公司設計模式數據結構 WebApp 2019-07-19

'web前端--10個妨礙進步的學習方式'

技術 jQuery 人生第一份工作 JavaScript HTML5 大學 HTML CSS 跳槽那些事兒廣州知乎文章世紀佳緣 2019-07-16

web前端面試官常問問題合集，web程序員速度查看

前端面試常問哪些問題？CSS1、盒模型2、flex3、css單位4、css選擇器5、bfc 清除浮動6、層疊上下文7、常見頁面佈局8、響應式佈局9、css...

程序員 CSS 瀏覽器 HTML DNS 人生第一份工作泛函編程設計模式數據結構 2019-07-14

Vue + Django — 使用兩種前端框架的優勢

Django和Vue都具有獨特的前端優勢。Django的上下文驅動模板視圖提供了從後端模型內容直接快速開發頁面的功能。Vue的現代reactive組件為在...

Django JavaScript 瀏覽器 CSS 跳槽那些事兒今日頭條 2019-07-09

2019年最新經典web前端面試題，你是最棒的

2019年最新經典web前端面試題彙總。如果你一些基本問題答對了，那麼我可以肯定的是你面試任何公司的前端技術輪，都是沒問題的。不是我吹，是真的基礎很重...

Git JavaScript 人生第一份工作 CSS 技術 GitHub 瀏覽器 jQuery 設計模式虐殺原形編程語言超微半導體 2019-07-05

字節跳動開源高性能分佈式訓練框架BytePS：兼容主流訓練框架

近日，字節跳動人工智能實驗室宣佈開源一款高性能分佈式深度學習訓練框架BytePS，在性能上顛覆了過去幾年allreduce流派一直佔據上風的局面，超出目前...

人工智能虛擬機 GPU GitHub 通信設計算法 Uber 大數據英偉達特斯拉汽車百度 2019-06-29

騰訊率先開源面向世界，華為鴻蒙卻遲遲不出，其中緣由是為何

近日，騰訊宣佈成立開源管理辦公室，內部有三個機構。騰訊目前已經實現了內部開源協作，通過小團隊或跨部門大團隊的方式集中優勢，拉動內部項目和組織，尋求技術突破...

華為公司騰訊 Android 操作系統技術 Google 華為手機微軟任正非蘋果公司三星集團周鴻禕人工智能平板電腦經濟 Windows iOS GitHub Linux 硬件電腦 MIUI 算法 MWC 2019-06-29

好程序員web前端教程分享新手應該怎麼學習webpack

好程序員web前端教程分享新手應該怎麼學習webpack，什麼是webpack？一句話概括：webpack是一個模塊打包工具（module bundler...

程序員瀏覽器 JavaScript CSS JSON 工程師 2019-06-28

web前端工程師自我評價簡歷範文

自我評價（案例一）1、熟悉W3C規範，能熟練編寫優雅的HTML+CSS代碼，包括H5和C3新特性，熟練解決低版本瀏覽器兼容問題。2、熟練操作JavaScript,能夠運用面向對象編程思想進行編程，熟悉ES5/ES6語法。3、熟練掌握Ajax技術能與後端很好的合作,完成前後端...

HTML CSS JavaScript 人生第一份工作工程師 HTML5 jQuery 技術面向對象程序編程設計模式瀏覽器路由器範文 2019-06-28

騰訊率先開源面向世界，華為鴻蒙卻遲遲不出，但也應該這樣走

華為公司 Android 騰訊技術操作系統 Google 華為手機微軟任正非蘋果公司三星集團周鴻禕人工智能平板電腦經濟 Windows iOS GitHub Linux 硬件電腦算法 MWC 2019-06-28

web前端完整簡歷範文

基本信息姓名：七分簡歷年齡：25歲電話：131****2868郵箱：134911****@qq.com經驗：3年意向：web前端教育背景時間：2010-09 - 2014-07學校：【七分簡歷】科技大學 | 專業：計算機科學與技術 | 學歷：本科工作經歷工作時間：2012-...

人生第一份工作 WebApp jQuery 設計 CSS 技術 SQL HTML JavaScript Microsoft SQL Server 工程師天津範文 2019-06-27

具備這些特徵，輕鬆進入互聯網大廠成為web前端工程師

web前端依然是如今的熱門行業，尤其是互聯網企業，對web前端人才需求旺盛，薪資也不斷增高，但這並不意味著找一份web前端工程師的工作很容易。相反，互聯網...

設計工程師技術網頁設計 CSS 跳槽那些事兒 Photoshop Chrome 可視化技術 DNS 動畫電腦百度 HTML jQuery 2019-06-27

最爽的職業之一web前端！不僅工資高而且沒事還能寫個遊戲玩！棒

web前端程序員薪資高web薪資 17000左右就是好，可以隨便玩遊戲！！！程序員是這樣玩遊戲的GitHub經常有一些很有趣的項目，特別是一些小遊戲，有的...

程序員 GitHub 跳槽那些事兒 HTML CSS 小遊戲 JavaScript HTML5 建築良心國貨大賞 2019-06-23

Web端多數據庫支持管理工具，開源免費，關鍵界面還很好看

背景我之前一直在尋找一個Web端的數據庫管理工具，奈何找了很長時間，直到最近才找到一個比較滿意的，只能說功夫不負有心人，有了它讓我在管理數據庫的時候方便了...

數據庫 SQL GitHub Windows Microsoft SQL Server 瀏覽器 Linux MySQL MariaDB Excel PostgreSQL 電腦軟件 IBM 文章 2019-06-22

開源協作Web編輯器

在現代Web系統大流行時代，一款功能強大而切支持協作的Web的富文本編輯器是系統的最關鍵的組成部分。一款可真正在生產環境中使用的即插即用編輯器，可以能夠解...

開源軟件文本編輯器 XML 瀏覽器 HTML Apache GitHub 雲計算設計 2019-05-30

推薦中...