個人近年來的開發使用過react和vue，react相對於vue來講，在腳手架這方面做的還是比較簡陋的，所以對使用者來說，要掌握webpack、babel等知識，才能很好的搭建起乙個專案。vue在腳手架這方面做的是比較好的，一方面是降低了使用的門檻，用了他們的全家桶，就能很快的上手做乙個專案。vue的方向就是關注好用，易用，而react粒度更小，適合喜歡自己動手改裝的朋友。
umi是乙個類nextjs框架，nextjs是乙個服務端的腳手架，如果說react的競品是vue，那麼nextjs的競品就是nustjs，他們都提供了服務端渲染的腳手架，讓你遠離vue-server-renderer或react-dom/server 的困擾。
umi的主旨是開箱即用，適合企業級應用的開發。
首先說下開箱即用，裡面包含了常規的目錄結構劃分，採用了配置化的路由；包含了mock，讓你不用跟後端介面耦合；資料管理採用了dva，使用起來比redux要簡單一些；構建腳手架採用的roadhog，這不是乙個新的打包工具，主要是在webpack上封裝了一層的工具；layout層，他提供了公共的側邊欄元件，頭部元件，然後你的頁面就在中間那塊區域裡；提供了許可權路由，許可權也是乙個後台專案必備功能，因為一般不同使用者會有不同角色，不同角色會賦予不同許可權，使用者根據許可權訪問不同頁面。
然後就是企業級應用了，企業級應用主要是指一些中後台專案的開發，比如運營後台、廣告平台、scrm平台之類的；大部分頁面都是由表單、圖表、**組成；所以這就是企業級應用開發的共性；大部分企業都會使用一些元件庫開發，比如element-ui，或antd，可以減少很多開發量；但新的問題也隨之而來，大部分頁面其實長的差不多，不管是訂單系統、還是渠道管理，對後端的邏輯可能不同，但前端的展示是一樣的，對於前端來講，開發不同頁面變成了重複的搭積木，又有新的重複工作出現了。
umi作為乙個企業級框架，自然是提供了這方面的解決方案。它提供了乙個區塊的概念；依筆者粗鄙之見，它應該是乙個以頁面乙個小塊為粒度的元件，你通過
yarn create umi --type=blockumi block add [block url] --path=[target path]另外umi還提供了元件的開發，這部分有興趣的同學可以去官網檢視，我就不一一展開了。dvajs的用法這裡也不展開介紹了，可以看官網的鏈結。
dvajsdvajs.com
今天的umi 30秒介紹，主要介紹了他的特性和主要適用的場景，沒有太多的具體例子展開介紹，感興趣的同學可以官網原文了解。
002 搭建專案腳手架
第一步 利用vue官方腳手架vue cli的基礎上，搭建好自定義，如圖所示的目錄結構及所需腳手架檔案。目錄 build用來存放webpack相關配置和指令碼。config 主要存放配置檔案，用於區分開發環境 測試環境 線上環境的不同。src專案原始碼及需要引用的資源檔案，分為客戶端與服務端。stat...
cue cli腳手架搭建專案
vue兩大核心思想 元件化和資料驅動。元件化 把整體分為各個可以復用的個體，資料驅動 通過資料變化直接影響bom展示，避免dom操作。vue.js安裝 npm方法 1.檢視版本 npm v 2.公升級npm cnpm install npm g 全域性安裝 vue cli npm install g...
vue腳手架搭建專案
首先安裝node，npm會自動安裝，node v 和 npm v檢視是否安裝成功和版本 切換npm為cnpm使用 映象源 npm install cnpm g registry cnpm 檢視是否成功和版本號 安裝vue cli cnpm install g vue cli vue v檢視版本 進入...