使用AngularJS搭建前台框架
2017-01-13 本文已影响943人
EldonZhao
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再尝试尝试。
