【框架】itera-cli（初阶教程）

于 2018-04-04 09:52:27 发布
阅读量438 收藏
点赞数
分类专栏： 前端框架 文章标签： 框架 迭代 前端 javascript node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mcky_Love/article/details/79760782
版权

一、初观目录

一个合格的开发人员，应该从目录上着手，而不是茫然于代码之中。

经过itera init demo之后，目录即是这样的

目录大致结构

node_modules        // 一堆依赖
dist                // 打包后的文件
option              // 构建项目的重点
    |--build                // 预打包配置文件
    |--json                 // 配置项目的重中之重 * (稍后细讲)
src                 // 项目开发的所在地
    |--components           // 项目
        |--chanyejiance             // 自动生成的项目 * (稍后细讲)
        |--public                   // 开发时的项目选择登录页
    |--fonts                // fontAwesome字体文件
    |--img                  // 公用图片
    |--js                   // 静态js公用库
    |--less                 // 公用less
    |--static               // 另外的东西
    |--chanyejiance.js      // 产业监测项目的首页
    |--index.html           // 打包的模板
    |--index.js             // 打包的js
    |--login.html           // 开发时的项目选择登录页模板
    |--login.js             // 开发时的项目选择登录页js入口
tool                // 底层构建工具
README.md           // 使用说明
package.json        // npm管理包
webpack.dev.config.js       // 开发环境
webpack.prod.config.js      // 打包环境
yarn.lock                   // yarn安装自动生成，与项目无影响

好，大致上即是如此，其实多数东西都是自动生成的玩意，不需要过多的操心，这里只需要注意两处

  1. option/json/下的项目配置文件
  2. src/components/下的项目生成后的开发

二、项目创建的起点

一切皆从json出发

1、初窥json配置项

打开目录至option/json下，打开默认测试的“chanyejiance.json”文件
里面是这样的（并附带解释）：

{
  "title": "产业监测系统后台", // 最外面的即是浏览器title
  "url": "http://172.10.51.123:10186", // Ajax默认请求头
  "menu": [ // 菜单
    {
      "title": "产业监测", // 菜单名
      "fa": "fa-cube", // icon
      "href": "!/IndustryMonitoring", // 路由 --- “!” --- 即是点击后不进行跳转，多用于父级菜单
      "child": [ // 子路由
        {
          "title": "消费类型统计Test",
          "href": "@/Consumption_Type1" // “@” --- 隐藏该菜单
        }, {
          "title": "消费类型统计",
          "href": "/Consumption_Type",
          "module": ["table", "content"] // 另外需要的模板
        }, {
          "title": "营销效果对比",
          "href": "/Marketing_Effect",
          "child": [
            {
              "title": "消费类型统计",
              "href": "/Consumption_Type",
              "module": ["table", "content"]
            }
          ]
        }
      ]
    }
  ],
  "AloneRouter": [{ // 另外的独立路由，常用于单独的页面，例如#/login等不依赖于首页模板的文件
      "title": "独立路由A",
      "href": "/A",
      "module": ["open", "det"]
    }, {
      "title": "独立路由B",
      "href": "/B",
      "module": ["only", "more"]
    }
  ]
}

简单易懂的配置项，含有以下优势

1）递归算法：子路由无限嵌套。
2）状态监听：就算在开发过程中，修改配置项，依然可直接生效（文件的添加还是需要输入指令或手动添加）

2、创建新项目

自己动手，丰衣足食

将option/json/下的“chanyejiance.json”复制一份，并命名为自己的项目名称，这里举例为“test”，并修改下配置项

{
  "title": "test后台",
  "url": "http://172.10.51.123:10186",
  "menu": [
    {
      "title": "test",
      "fa": "fa-cube",
      "href": "!/test1",
      "child": [
        {
          "title": "消费类型统计Test",
          "href": "@/test1_1"
        }, {
          "title": "营销效果对比",
          "href": "/test1_2",
          "child": [
            {
              "title": "消费类型统计",
              "href": "/test1_2_1",
              "module": ["table", "content"]
            }
          ]
        }
      ]
    }, {
      "title": "test",
      "fa": "fa-cube",
      "href": "!/test2",
      "child": [
        {
          "title": "消费类型统计Test",
          "href": "/test2_1"
        }
      ]
    }
  ],
  "AloneRouter": [{
      "title": "登录页",
      "href": "/login"
    }
  ]
}

创建完后，进行构建

npm run auto

npm run json

npm run start

构建三部曲后，项目就多出来了~

开发登录页

这里选择test进入细致的项目开发（相同的，我们也进入src/components/test的目录下）

test开发界面

test目录结构

img             // 项目内的img文件
js              // js文件
    |--main                          // 开发的js核心 * (稍后细讲)
    |--adaption.js                   // 自适应js文件 (下个版本或许会删除)
    |--ajax.js                       // 自定义封装ajax
    |--inheritCore_extend.js         // 继承后扩展的js文件(中阶教程再谈)
less            // 样式
    |--public                       // 公用样式库
public                              // 项目中公共的文件
publicTemplate                      // 模板文件
    |--content                      // 开发的html核心 * (稍后细讲)
    |--inside                       // 用于引入的模板组件
    |--js                           // 静态js公用库
    |--basics.art.html              // 基础模板
    |--body.art.html                // 首页模板 * (稍后细讲)
    |--head.art.html                // 头部模板 * (稍后细讲)
    |--standardE.art.html           // 公共模板

3、开发指南

itera-cli的宗旨：路由 > js > 模板

1）如何修改起始页变为登录页

我们将js/main/目录下的index文件打开，并修改其内容

import { Arr, _this } from "test/js/inheritCore_extend.js"
import body from "test/publicTemplate/content/login.art.html" // 模板文件路径
export default res => new Arr([{
  init() {
  },
  ajax() {
  },
  handle() {
    this.render() // 输出
  },
  render() { // 自定义输出内容
    $('body').html(body({ // 该body为import导入的模板
      title: 'Hello World!',
    }))
  },
  bind() {
  }
}])

自定义首页

首页即变成自定义的了。通过渲染模板可变成登录页，然后进行触发btn跳转路由，进入至真正的首页。

2）如何修改首页的样式

打开首页所引入的模板位置 import body from “test/publicTemplate/body.art.html”
即可修改外观（默认外观为layui提供）。

如需修改菜单位置（例如排版要变上下结构），则需要重写模板内嵌的js代码块（递归输出菜单列表），当然后期也可推出上下结构的模板，进行迭代。

注意事项：

  1. 模板内请写es5语法（需兼容IE9的情况下）
  2. 内容输出的代码块不可舍去
<div class="layui-body scorll_style1">
  <div class="G-content"></div>
</div>
3） content内容如何渲染

例如当前路由为http://localhost:8080/test#/test1/test1_2，hash为 “#/test1/test1_2”
复制“test1_2”在你熟悉的IDE中，搜索该文件（例：Hbuilder 是 ctrl+t）
代码为以下内容并注释其中含义

import { Arr, _this } from "test/js/inheritCore_extend.js"
export default res => new Arr([{
  data: {
    title: '展示数据', // 标题
    /* 任意添加字段START */
    a: {},
    b: {},
    /* ......
    END
    */
    build: { // 配置项
      width: 12, // 参照bs宽，1 ~ 12
      line: 1, // 每到新的一行必写父级元素高
      height: '100%', // 例如此处
      res: res, // 不可修改
      template: 'content/test1/test1_2' // 模板位置
    }
  },
  handle () {
    this.render() // 输出
  }
}])

这里输出的内容在模板中皆可获取到data内的值，所以data内可任意添加字段

配置项将单独在下一个主题展开（因为较多且重要）

4） 样式或js文件如何引入

css：
css样式的话itera推荐在模板中直接内联或嵌入样式，因为模板已经模块化引入，如果外联样式再进行模块化管理，未免显得太多，太杂。
但仍想模块化样式的话，这里推荐集中式管理，例如：

@import "test1.less";
@import "test1_1.less";
@import "test1_2.less";
@import "test2.less";
@import "test3.less";
@import "test4.less";
@import "test5.less";
@import "test6.less";

js：
自己封装的组件，最好都以es6的方式依赖注入，避免暴露全局。
对一些jq插件性质的库（内含属于自己的依赖）则把它放入src/js/目录下
并在当前项目的publicTemplate下的head.art.html
以静态的方式引入

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="Author" content="My灬Best丶Angel" />
<meta name="Copyright" content="" />
<meta name="keywords" content="网站关键字" />
<meta name="description" content="网站描述" />
<title>{{ data.title }}</title>
<link rel="stylesheet" href="{{ root }}fonts/css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ root }}js/layui/css/layui.css" />
<link rel="stylesheet" href="{{ root }}js/layui/css/modules/code.css" />
<link rel="stylesheet" href="{{ root }}js/layui/css/modules/layer/default/layer.css?v=3.1.1" />
<link rel="stylesheet" href="{{ root }}js/layui/css/modules/laydate/default/laydate.css?v=5.0.9" />
<link rel="stylesheet" href="{{ root }}less/public.css" />
<script src="{{ root }}js/jquery-3.0.0.min.js"></script>
<script src="{{ root }}js/layui/layui.all.js"></script>

注意事项：

  1. {{ root }}的路径即为src/js/的路径。
  2. 对于一些另类的库，例如layui，里面有属于自己的js创建方式，如scripts标签方式创建，这样不利于打包路径的查找，所以这类的只能自己去源码修改修改。

4、丰富的配置项

itera-cli采用“路由、js、模板”名称一致性，更高效的开发，更轻便的维护

1）最精简的单模板配置

打开路由对应的js文件，最简配置项即是如下：

import { Arr, _this } from "bailidujuan/js/inheritCore_extend.js"
export default res => new Arr([{
  data: {
    title: '展示数据',
    build: {
      line: 1, // 每到新的一行必写父级元素高
      height: '100%', // 例如此处
      res: res,
      template: 'content/IndustryMonitoring/Marketing_Effect/Consumption_Type' // 写入对应的模板位置
    }
  },
  handle () {
    console.log('--- 我是数据处理，并输出')
    this.render() // 这就是输出
  }
}])
2）多模板配置
import { Arr, _this } from "test/js/inheritCore_extend.js"
export default res => new Arr([{
  data: {
    title: '展示数据',
    build: {
      width: 6,
      line: 1, // 每到新的一行必写父级元素高
      height: '50%', // 例如此处
      res: res,
      template: 'content/test1/test1_2'
    }
  },
  handle () {
    this.render() // 输出
  }
}, {
  data: {
    title: '展示数据',
    build: {
      width: 6,
      line: 1,
      height: '50%', // 该高度为line行总高度的百分比
      res: res,
      template: 'content/test1/test1_2'
    }
  },
  handle () {
    this.render() // 输出
  }
}, {
  data: {
    title: '展示数据',
    build: {
      width: 12,
      line: 2, // 每到新的一行必写父级元素高
      height: '50%', // 例如此处
      res: res,
      template: 'content/test1/test1_2'
    }
  },
  handle () {
    this.render() // 输出
  }
}])

所对应的界面为：

这里写图片描述

3）模板的详细配置
import { Arr, _this } from "test/js/inheritCore_extend.js"
export default res => new Arr([{
  data: {
    title: '展示数据',
    build: { // 配置项 - 更多配置项请去inheritCore_extend.js扩展
      name: 'test', // id - 不写则为随机id
      width: 6, // 宽 - 参照bs栅格
      line: 1, // 行 - 每到新的一行必写第几行
      height: '50%', // 高 - 相对于浏览器高百分比
      res: res, // 默认
      css: ['transform: rotate(45deg);top:50%'], // 样式 - 自定义父级样式，例如定位问题
      template: 'content/test1/test1_2' // 模板位置
    }
  },
  init () {
    console.log('--- 我是节点初始化')
  },
  ajax () {
    console.log('--- 我是获取数据')
  },
  handle () {
    console.log('--- 我是数据处理，并输出')
    this.render() // 这就是输出 --- 输出后自动执行bind
  },
  bind () {
    console.log('--- 我是事件绑定') // 执行过this.render，则就到这儿执行了。
  }
}])

对应的界面如下：

这里写图片描述

4）完整的所有配置项
import { Arr, _this } from "bailidujuan/js/inheritCore_extend.js"
export default res => new Arr([{
  data: {
    title: '展示数据',
    build: { // 配置项 - 更多配置项请去inheritCore_extend.js扩展
      name: 'test', // id - 不写则为随机id
      width: 12, // 宽 - 参照bs栅格
      line: 1, // 行 - 每到新的一行必写第几行
      height: '50%', // 高 - 相对于浏览器高百分比
      res: res, // 默认
      css: ['transform: rotate(45deg);top:50%'], // 样式 - 自定义父级样式，例如定位问题
      template: 'content/IndustryMonitoring/Marketing_Effect' // 模板位置
    }
  },
  init () {
    console.log('--- 我是节点初始化')
  },
  ajax () {
    console.log('--- 我是获取数据')
  },
  handle () {
    console.log('--- 我是数据处理，并输出')
    this.render() // 这就是输出 --- 输出后自动执行bind
  },
  bind () {
    console.log('--- 我是事件绑定')
  }
}], {
  beforeCreated () {
    console.log('我是路由载入时的钩子')
  },
  created () {
    console.log('我是节点创建前的钩子')
  },
// mounted () { --- 已取消自定义配置输出项
//   console.log('我是执行自定义创建过程')
// },
  beforeDestroy () {
    console.log('我是节点创建后的钩子')
  },
  hashchange () {
    return r => {
      console.log('我是路由跳转前的钩子')
    }
  },
  destroyed () {
    console.log('我是页面销毁前的钩子')
    debugger // 这里你不debugger，你看不到console的内容，因为速度太快，页面已刷新
  }
})

这里写图片描述

配合以上操作，即可混合配置，从而进行对应的业务开发，
开发完即可npm run 项目名称 进行打包上线。

三、更多的可能性

如不满足于配置项以及暴露的过程化周期，请移步下一章（中阶教程）

【快速入口】itera-cli（中阶教程）

tips：当前文档未完善

关于

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.youkuaiyun.com/mcky_love

掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts

github：https://github.com/gs3170981/webpack_artTemplate.git

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值