美文网首页js前端杂货铺Web前端之路
使用AngularJS搭建前台框架

使用AngularJS搭建前台框架

作者: EldonZhao | 来源:发表于2017-01-13 10:42 被阅读943次

    Node.js部署:

    • 下载安装包:
      Node.js官网下载Node.js安装包
    • 安装Node.js:
      打开node-v6.9.4.pkg文件,一步步安装即可。

    linux环境下node-v6.9.4.tar.gz包安装:
    tar -zxvf node-v6.9.4.tar.gz
    cd node-v6.9.4
    ./configure
    make
    sudo make install

    AngularJS2部署:

    • 全局安装yo:
    yangweidandeMacBook-Pro:~ zhaoxueyong$ node -v
    v6.9.4
    yangweidandeMacBook-Pro:~ zhaoxueyong$ npm -v
    3.10.10
    yangweidandeMacBook-Pro:~ zhaoxueyong$ sudo npm install -g yo
    
    • 全局安装generator:
    yangweidandeMacBook-Pro:Browser zhaoxueyong$ sudo npm install -g generator-karma
    npm ERR! shasum check failed for /tmp/npm-17960-7f712c1b/registry.npmjs.org/istextorbinary/-/istextorbinary-2.1.0.tgz
    npm ERR! Expected: dbed2a6f51be2f7475b68f89465811141b758874
    npm ERR! Actual:   6a2b96fd6b0894eb0e63405d2a97cab7cbc65926
    npm ERR! From:     https://registry.npmjs.org/istextorbinary/-/istextorbinary-2.1.0.tgz
    #解决方法参考“参考资料[5]”
    yangweidandeMacBook-Pro:Browser zhaoxueyong$ sudo npm install -g grunt-cli bower yo generator-karma generator-angular #必须同时安装才能成功,很神奇
    yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ sudo npm install phantomjs -g
    

    phantomjs安装失败,个人遇到的原因是默认安装包地址被墙,更换成可用地址即可。
    npm install phantomjs-prebuilt --phantomjs_cdnurl=http://cnpmjs.org/downloads

    • 构建前台框架:
    yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ cd Browser/
    yangweidandeMacBook-Pro:ColusLifeDemo zhaoxueyong$ sudo yo angular
    
    • 启动服务:
    yangweidandeMacBook-Pro:Browser zhaoxueyong$ cat Gruntfile.js 
    yangweidandeMacBook-Pro:Browser zhaoxueyong$ grunt serve
    # 启动已经存在的项目之前,需要在项目目录下执行npm install && bower install
    
    页面快照

    Bootstrap部署(不需要):

    yangweidandeMacBook-Pro:bootstrap-3.3.7-dist zhaoxueyong$ tree
    .
    ├── css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   ├── bootstrap-theme.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    ├── fonts
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js
        ├── bootstrap.js
        ├── bootstrap.min.js
        └── npm.js
    
    • 把编译包放到库目录:
    yangweidandeMacBook-Pro:lib zhaoxueyong$ mv bootstrap-3.3.7-dist/ /usr/local/lib/
    yangweidandeMacBook-Pro:lib zhaoxueyong$ cd /usr/local/lib/
    yangweidandeMacBook-Pro:~ zhaoxueyong$ mv bootstrap-3.3.7-dist/ bootstrap
    
    • 问题解决:
      启动时提示如下告警:
    Warning: not found: compass Used --force, continuing.
    

    应该是没有安装Ruby导致的,安装Ruby再尝试尝试。

    参考资料:

    相关文章

      网友评论

      • hoobyy:没有说明文字,看不懂你的
        EldonZhao:@hoobyy 抱歉哈,确实这篇写的有点乱,我回头再整理一下~

      本文标题:使用AngularJS搭建前台框架

      本文链接:https://www.haomeiwen.com/subject/kpeqbttx.html