最近在找一个功能比较丰富的前端框架,之前一直使用的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 之前

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

配置代理的命令(全局代理可以忽略此部分说明):

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

以后就可以直接用啦,默认会从镜像中下载包。

如果需要还原,可以使用命令:

npm config set registry http://registry.npmjs.org/

使用方法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 吧!

开始学习使用 Semantic UI的更多相关文章

  1. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  2. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  3. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  4. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

  5. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

  6. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  7. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  8. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  9. Swift学习之常用UI的使用

    Swift学习之常用UI的使用 最近笔者在开始学习苹果最新的编程语言,因为笔者认为,苹果既然出了这门语言就绝对不会放弃,除非苹果倒闭了(当然这里知识一个玩笑). 所以在不久的将来,swift绝对是iO ...

随机推荐

  1. jqGrid遍历所有行及获取某一行数据

    $("#gridTable").find("tbody tr").not(".jqgfirstrow").each(function (i) ...

  2. 4、redis之使用commons-pool

    增加池的配置文件redis-pool.properties: #最大能够保持idel状态的对象数 redis.pool.maxIdle=200 #当池内没有返回对象时,最大等待时间 redis.poo ...

  3. python模块之keyword

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python模块之keyword import keyword ''' >>> help( ...

  4. weblogic服务目录迁移记录

    weblogic服务,由于前期的规划不好,导致后期有点问题!为了更加规范运行服务及执行相关操作,故进行服务迁移... 先决条件:weblogic都是单个aminserver运行的,单个服务 问题解决: ...

  5. FTP下载工具

    开源的FTP下载工具,FTP搬运工.... 01.FileZilla_3.21.0_win64 官方地址: https://filezilla-project.org/ 下载地址: http://pa ...

  6. Redis C客户端Hiredis代码分析

    初始化 redisContext - Redis连接的上下文 /* Context for a connection to Redis */ typedef struct redisContext { ...

  7. ASP.NET之通过JS向服务端(后台)发出请求(__doPostBack is undefined)

    ASP.NET回发数据是通过函数__doPostBack来实现的.该函数在加入了服务端控件,并将AutoPostBack设置为true之后,将自己主动生成,详细能够參看以下的图. watermark/ ...

  8. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  9. vmware与virtualbox之对比分析

    2012-04-01 16:01:17        vmware与virtualbox之对比分析   测试过程:本机安装双系统xp.ubuntu:在每个系统中安装两种虚拟机:每个虚拟机虚拟一个Win ...

  10. java mail qq邮箱配置 实例

    程序入口:Test_Email_N.java import java.io.IOException; import java.util.Date; import java.util.Propertie ...