SematicUI安装方法:

参考:
http://www.semantic-ui.cn/introduction/getting-started.html
http://www.qdfuns.com/notes/18123/af344b6aac29f2da66fcb746f82c4070.html

一、先安装nodeJs、git

二、在命令行输入node -v和npm -v 查看是否安装成功

三、安装gulp npm install -g gulp

四、新建一个目录,然后进入这个目录的命令行
npm init --创建一个package文件(正常情况下,package文件会自动创建)
npm install semantic-ui
选择Automatic(自动配置)
选择yes
再Enter(将semantic ui 放在/semantic目录下面)
这个时候新建的目录下会有node_modules、semantic、semantic.json三个文件

五、cd semantic --进入semantic文件夹
gulp build(编译好的semantic ui文件就会放在dist目录下)
components semantic.js semantic.min.js semantic.css semantic.min.css themes

六、JQuery组件

Semantic UI 的一些组件需要用到 jQuery ,我们在项目下面创建一个目录,命名为 javascript ,然后把 node_modules/jquery/dist 下面的 jquery.min.js 放到 javascript 这个目录的下面。

cd ~/desktop/ninghao-semantic
mkdir javascript
mv node_modules/jquery/dist/jquery.min.js javascript/

七、浏览器自动刷新功能

用 Atom 编辑器打开项目的目录,然后你可以再去使用 Browsersync ,监视一下项目下的 index.html 这个文件的变化,这样你在修改这个文档以后就不需要手工去刷新浏览器来查看变化了。

安装 Browsersync

npm install -g browser-sync (我的一直安装不上)
创建服务器并监视文件变化

cd ~/desktop/ninghao-semantic
browser-sync start --server --no-notify --files "index.html"

 

posted on 2017-02-13 14:13  小房子詹  阅读(361)  评论(0编辑  收藏  举报