cabin之创建工程

一、安装

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

二、创建工程

1、创建工程

​ 创建命令如下:

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

2、修改菜单配置

a、菜单修改

在查看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);
            // });

		},
	}

b、服务器接口

​ 第二个报错的地方为 项目名/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;
			}

中修改域名地址即可!

c、重构菜单的底色

在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 配置才能修改此参数

top