先贴出Semantic UI的官方文档:https://semantic-ui.com/introduction/getting-started.html#html
其实安装方法在官方文档中已经写的很详细了~没想到过程还是异常的艰难,尤其是对我这种小白来说,记录下来,避免以后忘记。
第一步:安装nodejs
这个相信搞前端的人都下载了,安装方法也很简单,去官方上下就行,下载好后会自动配置好环境变量。
第二步:安装gulp
npm install -g gulp
按官网上说的指令安装,也没出现问题。
第三步:安装 Semantic UI
这一步问题可就来了,我先按官网上给的教学视频安装了一下,发现没有安装成功,报错信息也一大堆,基本上没法查出是哪儿出现的问题。然后我就重新安了一下,对照教学视频一步步查看是哪儿出现了问题,果然找了出来,下图标红的部分之前是没错的,
标红的命令行运行了之后,会报下面的错误,忘记截图了,错误大概是这样:
ReferenceError: primordials is not defined
百度了一下发现是nodejs和gulp的版本不兼容。网上给出的方法有两种:降低nodejs的版本或者是提升gulp的版本。
我选择了降低nodejs的版本,我找了一个node的版本管理器,不然一直重新安装node太麻烦了。
版本管理器的安装方法网上有很多,这就不再记录了,可以参考这个:https://www.jianshu.com/p/24371f85c832 。 安装之前要把旧的版本删掉!!
安装好版本管理器后我下载了11.15.0,是因为有大佬说v11.15.0就可以和gulp兼容了~记得在安装好nodejs的新版本之后要重新安装一下gulp
npm install gulp-cli -g
兼容问题解决了,接下来就可以美滋滋的继续安装Semantic UI
npm install semantic-ui --save
激动的心颤抖的手,我们马上要迎来了胜利!!结果安装到这一步的时候就卡着不动了,干的漂亮!
我等了基本上有半个小时还是不动,只要强行停止安装,继续打开百度查这是什么原因,https://github.com/Semantic-Org/Semantic-UI/issues/6641
这儿有大佬给出node版本还是太高,所以我又安装了10.1.0版本的。运行后报以下错误:
猜测应该之前没有把Semantic UI清除干净,所以建了一个新的文件夹重新执行:
npm install semantic-ui --save
这回没什么问题了,继续往下走:
cd semantic/
gulp build
这一步又报错了
敲黑板划重点,其实这里是我粗心了,上面提到过安装了一个新的nodejs版本后要重新安装一下gulp,于是我先装了gulp,然后再继续执行gulp build 出现下面代码的时候就表示安装成功啦
在html中引入Semantic UI就可以使用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
</head>
<body>
<button type="button" class="ui button">Click</button>
</body>
</html>
ok,Semantic UI安装的安装到这里就结束了,总结一下出现这么多问题的原因主要是我对node的版本不是太了解,还有就是有点粗心,希望以后改进!