Skip to content
Nice easy Kaola project toolkit
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmrc
.travis.yml
LICENSE
README.md
package-lock.json
package.json

README.md

NEK

NPM version Build Status Downloads Code style

Nice easy Kaola project toolkit

基本介绍

NEK 是考拉前端提高开发效率开发的一个脚手架工具链,主要是为了统一后台前端规范、减少写重复代码、以及方便离线调试。总共包括三个部分:nek-cli(即本工程),nek-uinek-server。其中三者的关系可以简单用下图表示:

如何使用

nek scaffold

options:

--help 显示帮助信息 [布尔]
--version 显示版本号 [布尔]
-i, --init 选择要创建的工程类型并创建 [字符串]
-a, --add 添加映射 [字符串]
-d, --del 删除映射 [字符串]
-l, --list 映射列表 [布尔]

  1. nek scaffold -a [keyword] [url]添加一条映射,
    映射关系通过nek-server api保存在数据库中,比如: nek scaffold -a regular+nekui https://github.com/smallcosmos/RNST/archive/master.zip
  2. nek scaffold -d [keyword]删除一条已有的映射
  3. nek scaffold -l查看已有的所有映射
  4. nek scaffold -i [keyword]拉取一份前端框架模板

通过nek scaffold命令行管理的各类框架模板包含了
Nej+Regular+Nekui,
Webpack+Regular+Nekui SPA,
以及Webpack+Vue+Elementui等等,
还可以自定义配置各种框架模板,通过nek scaffold -a加入映射关系。

nek build配置

NEK 的配置需要在项目的前端根目录创建一个名为 .nekrc 的文件,配置以下字段:

{
    "projectId": "项目 ID,从 NEK-Server 可得到",
    "urlReplace": "目前目录是基于 URL 结构生成的,这个选项表示去除冗余的 URL 前缀",
    "pageRoot": "静态文件目录",
    "jsRoot": "JS 根目录",
    "urlMaps": "moky urlMaps 路径,可选",
    "BaseComponent": "基础组件路径(NEJ 路径,下同)",
    "ListComponent": "列表组件路径",
    "BaseModal": "基础模态框路径"
}

NEK 的 mock 和 proxy 功能是单独由 moky 提供的,所以需要在 .nekrc 同级目录下新建一个 moky.config.js 文件,具体配置见 moky 文档。

根据 URL 生成指定目录结构

如果你希望从 URL 快速生成目录结构和基础模板,可以执行 nek build -u <url> 命令,但是这里的模板并不是无中生有的,前提是该项目在 NEK-Server 配置好了模板。

从拖拽好的页面生成目录结构和基础页面代码

如果你已经在 NEK-Server 上通过拖拽生成好了页面,那么复制页面 pageId 后就可以通过命令 nek build -k <pageId> 直接生成目录结构和填充好基础页面的代码了。

本地调试

本地调试几乎跟 moky 一样,唯一的区别就是你可以直接用 nek moky 替代 moky 命令。

模板样例

因项目而异

  • html
 {{#if title}}
<h2 class="u-title">{{title}}</h2>
{{/if}}

{{#ifAllCustoms rows false}}
<ui.form>
{{/ifAllCustoms}}
{{#each rows}}
    {{#ifCond components.length '>' 1}}
    <div class="g-row">
    {{/ifCond}}
    {{#each components}}
    {{#ifCond id '===' 0}}
    {{!-- 自定义模块备注 --}}
        {{#if desc}}<!-- {{desc}} -->{{/if}}
        <{{name}} 
            {{#if cols}}{{#ifCond cols '<' 12}}cols={{cols}}{{/ifCond}}{{/if}}
            {{#if offset}}offset={{offset}}{{/if}}
        />
    {{else}}
        {{!-- 组件开始 --}}
        <form.item 
            {{#if labelTitle}}title="{{labelTitle}}"{{/if}}
            {{#if labelHint}}tip="{{labelHint}}"{{/if}}
            {{#if cols}}{{#ifCond cols '<' 12}}cols={{cols}}{{/ifCond}}{{/if}}
            {{#if offset}}offset={{offset}}{{/if}}
            {{#if required}}required{{/if}}
        >
        <{{name}}
            {{!-- 遍历组件属性,3种情况:1. none 2. expression 3. 普通字符串属性 --}}
            {{#each conf}}
                {{#ifCond type '==' 'none'}}
                {{key}}
                {{else}}
                    {{#ifCond type '==' 'expression'}}
                    {{key}}={{model value}}
                    {{else}}
                    {{key}}="{{value}}"
                    {{/ifCond}}
                {{/ifCond}}
            {{/each}}
            />
    </form.item>
    {{/ifCond}}
    {{/each}}
    {{#ifCond components.length '>' 1}}
    </div>
    {{/ifCond}}
{{/each}}
{{#ifAllCustoms rows false}}
</ui.form>
{{/ifAllCustoms}}
  • javascript
 {{#macro "deps"}}
/* beautify ignore:start */
  {{#if isModal}}
  '{{BaseModal}}'
  {{else}}
  '{{BaseComponent}}'
  {{/if}}
  {{#if isPage}}
  ,'text!./page.html'
  {{else}}
  ,'text!./index.html'
  {{/if}}
  {{#each modules}}
  ,'./modules/{{name}}/index.js'
  {{/each}}
/* beautify ignore:end */
{{/macro}}

/**
 * @file 描述本文件的主体功能
 *
 * @param {component} ProductModal - 描述依赖组件的作用
 * @param {plugin}    pricePlugin  - 描述plugin的作用
 *
 * @see KJDS-2758: {{today}} 你的名字 初始化页面
 */
define([{{deps}}
], function({{#if isModal}}BaseModal{{else}}BaseComponent{{/if}},template) {

  {{#if isModal}}
  return BaseModal.extend({
    {{#if name}}
    name: '{{name}}',
    {{/if}}
    template: template,
    config: function(data) {
      this.supr(data);
    }
  })
  {{else}}
  return BaseComponent.extend({
    {{#if name}}
    name: '{{name}}',
    {{/if}}
    template: template,
    config: function(data) {
      this.supr(data);
    }
  });
  {{/if}}
});
  • entry
 NEJ.define([
   'base/klass',
   'pro/widget/module',
   './modules/page.js'
 ], function(k, m, Page, p, pro) {

   p._$$Module = k._$klass();
   pro = p._$$Module._$extend(m._$$MModule);

   pro.__init = function(options){
     this.__super(options);

     new Page().$inject('#app');
   };

   return p;
 });
  • freemarker
 <!DOCTYPE html>
<html>
<head>
    <#include "/common/import.ftl">
    <title>页面title</title>
    <meta charset="utf-8"/>
    <@css/>
</head>
<body>
<@topHeader />
<div class="g-body">
    <@leftMenu />
    <div class="g-main">
        <div id="app"></div>
    </div>
</div>
<@htmFoot />
<script src="${nejRoot}"></script>
<script>
    NEJ.define([
        'pro/page/{{pageName}}/entry'
    ],function(m){
        m._$$Module._$allocate();
    });
</script>
</body>
</html>

License

license

You can’t perform that action at this time.