前言

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

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

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

css

<link rel="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)才对
  • 没有中国参与的标准,不能称为世界标准*。

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