锐客网

  1. 首页 > 睿知 > it技术 > >

Window下搭建foundation apps环境

IT知识windowfoundation

得意犹堪夸世俗，诏黄新湿字如鸦。这篇文章主要讲述Window下搭建foundation apps环境相关的知识，希望能为你提供帮助。
Window下搭建foundation apps环境
框架：AngularJS、Foundation，
构建工具：Gulp，
开发环境：node.js。
操作系统：windows
（一）环境准备
1 安装node.js
            1.1 安装最新版本（0.12.7），安装时请选中“add to path” 选项
            1.2 设置淘宝镜像，打开 cmd窗口，输入以下命令
                      npm config set registry=http://registry.npm.taobao.org/
                      npm config set loglevel=http
            如果安装不成功，可安装cnpm:
                          npm  install -g  cnpm  --registry=https://registry.npm.taobao.org 
            1.3 打开cmd，窗口，输入npm -v 检查是否安装成功
2 安装Git
            2.1 设置Git环境变量，右击“我的电脑”-> “属性”-> "高级系统设置"-> “环境变量”-> “系统变量” 下找到path，加入git的安装目录
                            C:\Program Files (x86)\Git\bin;
          2.2 打开cmd，窗口，输入git --version 检查是否安装成功
3 安装python
        3.1 必须是2.7-3.0 之间的版本（本人安装的是python-2.7.10.amd64），安装时选中“add to path” 选项
3.2 打开cmd，窗口，输入python 检查是否安装成功
4 安装Ruby（可选）
 
 
（二）创建项目
(1)  安装所需要的工具：yo，gulp和bower，
      npm install -g yo gulp bower
 
(2) 安装generator-gulp-angular：
      npm install -g generator-gulp-angular
 
(3) 在项目根目录下安装node-sass
      npm install node-sass
      如果报错Error  :  ”msbuild” failed  with exit code:1...
      则安装VS Express 2013 for Desktop，
      网址为：http://www.yalewoo.com/vs_2013_express.html
      重复安装node-sass，若不行则全局安装：npm install -g node-sass
      如果全局安装失败，node-sass   -v找到全局安装目录，可以把bode-sass文件拷在全局安装目录下
 
【Window下搭建foundation apps环境】(4) 如果已经取得完整项目，可直接在项目根目录下运行。
        gulp serve
以启动网站
 
(5) 创建项目，如果不需要指定项目名称，app-name可以不写，默认使用当前目录名作为项目名称
yo gulp-angular [app-name]
 
(6)  项目创建过程中会要求选择配置项，如是否需要jquery，sass，bootstrap，foundation等，根据实际需要选择。一般情况下选择：
Version of Angular:   1.5.x(stable)
Angular Modules:   angualr-animate.js
jQuery or perhaps Zepto:   jQuery 2.x
Use a REST resource library:   ngResource
Router:   UI Router
UI framework:   Foundation
Foundation components: The official jQuery implementation of Foundation
CSS preprocessor:   Sass(Node)
JS preprocessor:   None
HTML template engine:   None
 
(7)  运行项目
      gulp serve
      如果运行的时候报错：
Error:Missing binding D:\workspace\ABC\node_modules\node-sass\vendor\win32-64-48
\binding.node
其中ABC为项目文件夹
直接在该目录下放置binding.node，再运行即可

    推荐阅读


    上一篇：cordova+vueCordova的环境搭建（android），真机测试

    下一篇：安卓Android Support Design Library——Snackbar