Semantic UI 是一套開源的 CSS 與 JavaScript 架構，提供了一些設計好的介面組件，你可以在項目裡直接使用這些組件。它還提供了一套很方便的定製主題的方法，你可以用自己的想法去改變介面組件的樣式。在這個教程裡我們學習一下安裝 Semantic UI 。
準備工具
你需要使用命令列去安裝，Windows 用 Powershell ，Mac 使用終端。然後確定你已經安裝好了 npm 與 gulp 。
安裝 Semantic UI
先為項目建立一個目錄，然後進入到這個目錄的下面，比如我在自己的案頭上去為項目建立一個目錄：
cd ~/desktop
mkdir ninghao-semantic
cd ninghao-semantic
使用 npm 去安裝一下 Semantic UI：
npm install semantic-ui
過一會兒會出現設定 Semantic UI 的提示，按上下箭頭可以選擇：
❯ Automatic (Use defaults locations and all components)
Express (Set components and output folder)
Custom (Customize all src/dist values)
Automatic：自動設定，一切都用預設的設定。
Express：快速設定，只需要設定組件還有輸出的目錄。
Custom：自訂，完全自己去定義 src/dist 目錄。
選擇預設的 Automatic ，斷行符號執行，又會提示：
[?] We detected you are using NPM. Nice!
Is this your project folder?
/Users/xiaoxue/Desktop/ninghao-semantic (Use arrow keys)
❯ Yes
No, let me specify
問我們案頭上的 ninghao-semantic 這個目錄是不是我的項目的目錄， Yes ，再斷行符號執行一下。 提示：
[?] Where should we put Semantic UI inside your project? (semantic/)
意思是要把 Semantic UI 放在項目目錄的哪個目錄的下面，預設這個目錄就是 semantic 。斷行符號執行，會完成安裝，查看項目目錄下面的東西，你會看到：
node_modules semantic semantic.json
進入到 semantic 這個目錄的下面，然後再執行編譯的命令。
cd semantic
gulp build
編譯好的 Semantic UI 會放在 dist 這個目錄的下面。這個目錄有下面這些東西：
components semantic.js semantic.min.js
semantic.css semantic.min.css themes
components 目錄下面是單獨的一些組件，如果你只想使用 Semantic UI 裡的某些組件，可以在這個目錄下面找到這些組件。如果你想使用全部的組件，可以使用 semantic.css 與 semantic.js ，或者使用它們的最小化之後的版本，semanitc.min.css 與 semantic.min.js 。
任務
在 semantic 這個目錄的下面，有一個檔案叫 gulpfile.js ，在這個檔案裡定義了一些可以執行的任務，比如剛才我們用了 gulp build 去編譯了 Semantic UI ，你也可以單獨編輯 Semantic UI 的 CSS 或者 JavaScript ，執行任務你需要在項目下的 semantic 這個目錄的下面。
編譯 CSS
gulp build-css
編譯 JavaScript
gulp build-javascript
自動編譯
你可以讓 Semantic UI 自動去編譯，當你修改了某些檔案以後，會自動執行任務去編譯 Semantic UI ，執行任務：
gulp watch
基本結構
你可以在項目的根目錄下面建立一個 HTML 檔案，在這個檔案裡嵌入需要的 CSS 與 JavaScript ，這樣就可以去練習 Semantic UI 了。
比如在項目的根目錄下面，建立一個名字是 index.html 的檔案，這個檔案裡的內容大概是這樣的：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>Semantic UI</title>
<link rel="stylesheet" href="http://ninghao.net/semantic/dist/semantic.min.css">
</head>
<body>
<!-- YOUR CODE -->
<script src="http://ninghao.net/javascript/jquery.min.js"></script>
<script src="http://ninghao.net/semantic/dist/semantic.min.js"></script>
</body>
</html>
Semantic UI 的一些組件需要用到 jQuery ，我們在項目下面建立一個目錄，命名為 javascript ，然後把 node_modules/jquery/dist 下面的 jquery.min.js 放到 javascript 這個目錄的下面。
cd ~/desktop/ninghao-semantic
mkdir javascript
mv node_modules/jquery/dist/jquery.min.js javascript/
自動重新整理
用 Atom 編輯器開啟項目的目錄，然後你可以再去使用 Browsersync ，監視一下項目下的 index.html 這個檔案的變化，這樣你在修改這個文檔以後就不需要手工去重新整理瀏覽器來查看變化了。
安裝 Browsersync
npm install -g browser-sync
建立伺服器並監視檔案變化
cd ~/desktop/ninghao-semantic
browser-sync start --server --no-notify --files "index.html"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
