解决安装 Semantic-UI 的各种坑（亲测有效）

前言

为了更好的展示 H5 SPA 的开发效果，除了 Bootstrap 外，同时也采用了功能强大的 Semantic-UI。相比 Bootstrap，Semantic-UI 在模板（theme）上的功能强大很多。
然而要用得上 theme 功能，需要经过一个看似简单却巨坑慢慢的安装步骤。本文记录一下本人整个填坑过程。

一切从 Semantic-UI (https://semantic-ui.com/) 官网开始

在点击 Get Started 之后，就跳转到安装教程页面。对于那些不会用到 Semantic-UI 模板功能的人来说，安装确实非常容易。只需要在 html 里引入相应的 css 和 js 文件就可以了。

css

"stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

javascript

<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

如果你要用到它的 theming 功能，那么跟着官网的步骤安装就是噩梦的开始

正确的安装步骤 安装 nvm （Node Version Manager）

因为 Node 和 Gulp 存在很严重的版本冲突问题，为了不影响现存的 Node 应用，安装 nvm 管理不同的 Node 版本是很有必要的。
从 nvm-windows 官网下载 （https://github.com/coreybutler/nvm-windows/releases）installer


解压，点击 nvm-setup.exe 安装

通过 nvm 安装 NodeJS

在查看官网后发现最新的 node 版本是 v16.14.2。暂时这里，先安装最新版。

nvm install 16.14.2
nvm use 16.14.2


安装好后，检查一下node 及 npm 的 版本

安装 Gulp

根据官网指示，
输入，

npm install -g gulp

安装 Gulp。

安装 Semantic-UI（坑点）

在你的前端项目根目录里，新建一个新的项目文件夹，比如 my-semantic-ui-theming-demo，cd 进入新建的项目里，

根据官网指示，输入

npm install semantic-ui --save

然后程序报错！！！（这真的是官网的安装文档吗？）

扒了好些博文，说 primordials is not defined 是由于 NodeJS 和 Gulp 版本冲突所致。在经过好些研究和测试，花了我一整个上午，最终选定安装 Node 10.1.0 版本。

再次根据官网指示，执行

npm install semantic-ui --save

这次终于看到这个画面了，【泪目】

然后跟着指示选择，如下：

完成后看到项目文件夹里多出了 semantic 的文件夹，和其他文件。到这里安装工作全部完成了！！！

---

源代码

关注我并发表不少于10字评论可以获取本文源代码。

码农经典语录

Linus Torvalds
Talk is cheap, show me the code.

蜂窝码农

DRY Principle (Don’t Repeat Yourself) 是做技术的最大笑话, DRY Principle应该改成 DORY Principle (Do Repeat Yourself)才对没有中国参与的标准，不能称为世界标准*。

俗语
好读书、好记性不如烂笔头