amaze ui基于gulp构建,所以现在安装gulp需要的环境,gulp使用npm安装,npm基于node.js 所以一切从node.js开始

1 下载对应的node.js

打开 https://nodejs.org/en/download/  自己对应的系统,下载

2 对下载完毕的文件进行安装

windows一路点击next 慢慢等待就完毕!

在命令行下输入  node  如果有交互提示 表示安装成功

如果没有则查看系统变量Path,把path配置上去。

3 创建测试代码 进一步测试

文件名 t.js

var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("test nodjs");
response.end();
}).listen(8899);
console.log("nodejs start listen 8899 port!");

进入命令行下 找到t.js存储的路径 运行  node t.js

浏览器中打开,也成功!

4 配置npm的全局路径

Windows下的Nodejs npm路径是appdata,可能不是我们想要的路径,可以改成我们指定的路径方便管理。 
在cmd下执行以下命令 
npm config set cache “D:\nodejs\node_cache” 
npm config set prefix “D:\nodejs\node_global” 
如果命令无效,可以去nodejs的安装目录中找到node_modules\npm\npmrc文件,这个文件存放npm的userconfig配置。 
修改如下即可: 
prefix = D:\nodejs\node_global 
cache = D:\nodejs\ node_cache

5 全局安装gulp

命令行下输入

npm install -g gulp

然后输入gulp -v,如果提示不是内部或外部命令,说明没有配置系统变量path,手动去配置pasth,地址是prefix的地址。

6 本地安装gulp

建立项目,创建Gulpfile.js和package.json文件,在项目目录

运行命令npm install gulp –save-dev,安装本地gulp。

安装完毕!打开基于gulp的项目amaze ui的模板可正常查看

7. gulp的实施与使用

创建工作目录与发布目录 
工作目录:即没有经过压缩合并等处理的文件存放目录。 
发布目录:即项目发布所引用的文件目录地址,这里的文件是经过gulp压缩合并等处理后生成的文件,处理过后的名字可以自定义,也可以不处理即与未处理文件名相同。

使用amaze ui模板全过程的更多相关文章

  1. 十、VueJs 填坑日记之在项目中使用Amaze UI

    上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...

  2. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

  3. Amaze UI 模版中心上线丨十几款高质量优秀模版免费提供!

    Amaze UI模版中心终于上线了,目前汇聚了包含企业门户.新闻资讯.管理后台等多个领域的模版,全都可以免费下载. Amaze UI模版中心后续还会增加更多的模版以及领域,请各位持续关注. 模版中心的 ...

  4. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

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

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

  6. android自定义UI模板图文详解

    不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一 ...

  7. DoNet开源项目-基于Amaze UI的点餐系统

    帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...

  8. 有了bootstrap,为什么还要做amaze ui

    1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  9. 移动端 前端框架 amaze ui

    移动端 前端框架 amaze ui http://amazeui.org/?_ver=2.x

随机推荐

  1. (3)re模块(正则表达式模块)

    什么是正则表达式 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中,并通过 r ...

  2. 有锁Iphone 3GS 6.0.1 降级刷到4.2.1 完美越狱+解锁

    2012-12-20 百度空间所写 前言:由于之前的3GS升级到6.0.1后会有重启之后无法打电话的情况,同学觉得这样很烦,搞得手机不像个手机了.但是这也是没办法的,毕竟是不完美越狱加软解锁的.于是, ...

  3. .net 拆分字符串成数数组 包含使用空格 逗号 回车 换行符等

    简单的代码如下: public static string[] GetProductList(string inputstring)        {            char[] split ...

  4. PYTHON之MOCK WEB接口

    在日常的测试工作中,有时会有需要调用外部接口,拿到返回数据用以满足当前的测试任务的需求.但是当外部接口不可用,或者没有提供测试用环境时,我们就需要自己来mock一个接口的返回内容了,先让我们看一看下面 ...

  5. vue-cli 知识点

    vue init webpack [project_name] 构建的项目,新增功能需要做的工作: table th:first-of-type { width: 100px; } table th: ...

  6. postman环境变量的设置

    相同的api接口因为部署环境不同,分为test和fromal 不仅重复,还容易出错 下面来介绍一下Postman的一个小技巧来解决这种问题: 设置环境变量 Tips: 不是在OS中设置环境变量哦   ...

  7. C#读取Mysql blob字段 (转帖)

    http://blog.csdn.net/config_man/article/details/6123191 开发环境:Windows XP Professional SP3.VS2008.Winf ...

  8. iotBaidu问题小结

    1.后台程序不能正常运行: d:\>java -jar MqttService.jar Exception in thread "main" java.lang.Securi ...

  9. wxWidgets:给窗口添加工具条

    请先看上一篇<wxWidgets入门>. 修改MyFrame.h: #ifndef MYFRAME_H #define MYFRAME_H #include <wx/wxprec.h ...

  10. [OI向?] ubuntu下一些常用的技巧

    想起来什么就写什么吧. Ubuntu下的对拍程序 python是最为简便的. from os import system while True: system("./make > in ...