开始学习使用 Semantic UI

最近在找一个功能比较丰富的前端框架，之前一直使用的Bootstrap，感觉组件还是不够丰富，很多东西都需要不少自定义。于是就发现了 Semantic UI。

不过感觉网上相关的中文资料好少，官方网站（http://www.semantic-ui.cn/）倒是有小部分汉化，但是大部分内容还是都是英文的。。。

要开始使用这个框架，首先得要下载引用，嗯，这个步骤就头疼了一下，因为貌似没有直接现成的文件下载，需要使用 node.js、npm、gulp 等工具进行获取和编译。

之前只是看到过这几个单词，并没有真正的用过，这次也算是初步了解一下吧。

 

第一步：下载并安装 node.js （https://nodejs.org/download/）

在 Windows 下就直接选择 Windows Installer (.msi) 下载就好了。

下载完以后，安装，各种配置神马的不需要操心。里面还附带了 npm 模块，真是省心…

npm 就是 node.js？ 里的 package manager，就像 Visual Studio 里的 nuget 一样，用来管理（安装卸载？）各种包。

检查安装是否正常，可以打开 命令提示符（cmd） 在里面输入

node -v

如果一切正常，就可以看到 node.js 的版本号了。

不正常的话，我就不管了。。。

 

第二步：安装 gulp

有了 node.js 和 npm 这就算是有了基础环境了，但是里面并没有 gulp 模块，这个就可以使用 npm 来安装了。

 

但是！ npm 是要联网获取各种包的，因为墙的存在，在中国直接使用 npm 貌似很难。。。要么速度极慢，要么就根本连接不上。。。

所以使用 npm 之前

①可以配置FQ工具来解决问题

配置代理的命令（全局代理可以忽略此部分说明）：

npm config set proxy=http://127.0.0.1:8087

删除代理的命令：

npm config delete proxy

②不知道为什么，淘宝为大家建立了一个国内的 npm 镜像（https://npm.taobao.org/），这个镜像的访问速度是非常快的。

使用方法1：配置 npm 的包源，命令：

npm config set registry https://registry.npm.taobao.org[/code] 
以后就可以直接用啦，默认会从镜像中下载包。

如果需要还原，可以使用命令：

npm config set registry http://registry.npmjs.org/[/code] 
使用方法2：安装 cnpm，命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org


安装 cnpm 包以后，凡是要使用 npm 的时候，都将 npm 换成 cnpm 就可以了。

使用方法3：从上面方法应该可以看到，可以在每次安装包的时候，加上 --registry=https://registry.npm.taobao.org 参数

临时使用一下镜像，是吧。。

好吧，绕了一圈，现在开始安装 gulp 。。。命令：

npm install -g gulp


嗯，等待下载和安装完成即可。

 

第三步：下载 Semantic UI

在下载前，需要注意一下，刚刚安装 gulp 的时候，有一个参数 –g ，这个参数的意思是将包安装到全局目录中（就是 node.js 的安装目录下的 node_modules 文件夹中）。

但是如果不加 –g 参数，npm 会将包直接安装到命令行当前目录中。

（比如 C:\Windows\system32>npm install semantic-ui 就会把 semantic-ui 安装到 system32目录下。。。 ）

所以在执行命令之前，请先将当前目录 cd 到要下载的文件夹中。

然后执行命令：

npm install semantic-ui --save


命令执行过程中，可能会有相关的安装选项提示，如果不需要特殊更改，回车使用默认参数即可。

这样应该可以在你指定的目录中看到相关的文件夹了。（—save 参数是将当前包和相关的依赖信息写入 package.json 文件中（如果有），方便整个项目以后重新下载相关包时安装相关依赖包，不过暂时用不到这个东西）

 

第四步：修改和编译 Semantic UI

刚才下载完以后，会建立一个 semantic 文件夹，命令行 cd 进入 semantic 文件夹，如果不需要任何修改（关于修改相关参数，将在后面的文件中继续说明）

就可以直接运行命令，开始编译相关文件：

gulp build


命令成功执行完成后，就可以到 dist 文件夹中看到编译后的文件了。

 

第五步：完成

到这一步，应该就比较熟悉了，可以看到熟悉的 js 和 css 文件了。





semantic.js 和 semantic.css 文件是完全打包整合后的文件。

components 文件夹中是各个独立的组件，可以根据情况进行引用。

themes 文件夹是 相关图标，由 css 文件中的相关代码引用，记得把它和 css 文件一起复制就好了。

以后对 Semantic UI 的修改，基本上就是 先对 src 文件夹中的代码进行修改，然后使用 gulp build 命令重新编译，在 dist 文件夹中拿到最新的编译文件。

 

至于使用 npm 工具的好处，暂时还享受不了，因为以 Visual Studio 作为主力开发工具的，用这种没有集成在 Visual Studio 的工具，有一种很分裂的感觉。。

貌似 npm 在 Visual Studio 中的集成，只能在 ASP.NET 5（4.6？） 项目中使用，以前老的 ASP.NET 项目还是得像这样单独在 node.js 中使用 npm。

期待新的 ASP.NET 吧！