1、先配环境 node js 版本 大于6.0.0 特别要注意,目前只支持6.X版本来创建工程
2、切换npm 镜像$ npm config set registry https://registry.npm.taobao.org
3、安装项目脚手架$ npm i -g cabin-cli grunt(同时安装cabin和grunt)
4、初始化项目 cabin-init project-name
创建命令如下:
cabin-init trafficweb
后面的名字即为工程名字,根据提示选项创建工程
工程创建完后,可以使用下面命令
启动服务,服务默认是3000端口
cabin-dev-server
浏览器测试地址:
a. 先修改hosts 添加
127.0.0.1 local.dmall.com
b.设置cabin工作目录, 注意工作目录下应该有项目工程
cabin-init --path D:/work
c. 浏览器地址
http://local.dmall.com:3000/项目名/html/index.html?debug-项目名=http://local.dmall.com:3000/#index/项目名/demo
在查看demo页的时候会发现报读取数据失败, 这是因为一个是加载菜单数据,另一个是加载用户数据导致的
修改 项目名/modules/menu/menu.js文件下
_fn = {
init: function () {
handle.jView = kDom.get(handle.classname, $('.' + CFG.CONTAINER_CLS));
handle.jView.kInsert();
//todo-------------
//接口拿菜单数据
AJAX.post(cgiMain.menuTree, {}, function (res) {
var data = res.data;
opt.menu = data;
//菜单插件加载
handle.jView.find('#J_menuCont').CabinMenu(opt);
});
},
}
为
_fn = {
init: function () {
handle.jView = kDom.get(handle.classname, $('.' + CFG.CONTAINER_CLS));
handle.jView.kInsert();
// //todo-------------
// //接口拿菜单数据
// AJAX.post(cgiMain.menuTree, {}, function (res) {
// var data = res.data;
// opt.menu = data;
// //菜单插件加载
// handle.jView.find('#J_menuCont').CabinMenu(opt);
// });
},
}
第二个报错的地方为 项目名/modules/header/header.js
//获取用户数据
getInfo: function (callback) {
//todo---------------------------
var url = cgiMain.getUserInfo;
LOADING.show();
console.log(url)
ajax.post(url, {}, function (res) {
LOADING.hide();
if (res.code + '' != '0000') {
var popConfig = {
title: '',
msg: res.result,
html: '',
btns: {
'ok': {
text: '知道了',
click: function () {
}
}
},
onClickMask: function () {
}
}
POP.show(popConfig);
return;
}
修改的地方为
项目名/src/config/apimix.js
_fn = {
href: href,
HOST: EVT + 'setYourOwnOrigin', //这里设置接口域名
HOST1: EVT + 'setYourOwnOrigin1', //设置多个接口域名
mixUrl: function (host, url) {
var p;
if (!host || !url || _fn.isEmptyObject(url)) {
return;
}
中修改域名地址即可!
在menu.css中增加下面配置
/*重构菜单的颜色*/
.cabin .J_Menu{
background: linear-gradient(#4f4cd6,#c2bec2);
background-image: linear-gradient(rgb(79, 76, 214), rgb(207, 202, 207));
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
修改颜色值即可, 这是一个粗爆的改好, 确认只有这一个位置在使用这个CSS 配置才能修改此参数