对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包，订阅宁皓网就可以学习全部课程了。
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="https://ninghao.net/semantic/dist/semantic.min.css"> </head> <body> <!-- YOUR CODE --> <script src="https://ninghao.net/javascript/jquery.min.js"></script> <script src="https://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"
评论
npm 安装Semantic 好慢。
有什么快一些的安装方法么？
8 年 8 个月 以前
我传百度云盘上一个，已经安装好了依赖，你看看能直接用吧：http://pan.baidu.com/s/1qWOLiOW
8 年 8 个月 以前
百度一下“cnpm”，这是淘宝对 npm 的一个国内镜像，更新频率为 10 分钟，应该能满足你的需求。
8 年 8 个月 以前
很好，谢谢 ：）
8 年 8 个月 以前
mv node_modules/jquery/dist/jquery.min.js javascript/ 这段目录不对吧？
应该是：/node_modules/semantic-ui/node_modules/jquery/dist/jquery.min.js
？？
8 年 8 个月 以前
哦，我怎么直接在 node_modules 的根目录下找到了呢。您再看看， /node_modules/semantic-ui 下面有没有 jQuery 。
8 年 8 个月 以前
谢谢浩哥。
8 年 8 个月 以前
学习了！
8 年 8 个月 以前
请问皓哥，我用windows装semantic为什么总是报错？
8 年 8 个月 以前
前面用bootstrap 现在用semantic-ui 不知道这是一种趋势还是什么？
好像你现在也在用semantic-ui 给宁好网重新设计吗？
8 年 8 个月 以前
不是啊，两个不同的框架，您都可以用在自己的项目上，Semantic UI 也可以单独用它的某个组件，不一定用所有的东西。宁皓网暂时还在用 Bootstrap 2.x ，里面用了一点点 Semantic UI 的东西，很少。您不一定要用 Semantic UI 重构。不过可以先学习一下，可能会受到一些启发。
8 年 8 个月 以前
我以为你在用Semantic ui 开发app 呢？ app 用 SU 是不是多些？
险遭貌似用SU比BS多了
8 年 8 个月 以前
组件多一些，也更灵活。
8 年 8 个月 以前
cnpm 安装semantic-ui 总会出错，百度了好久都找不到原因，centos7.0
8 年 7 个月 以前
错误贴到论坛上看看。
8 年 7 个月 以前