KFront-Base
===========

# generator-kfront-base
generator-kfrontbase是一款前端工程自动化的脚手架工具，可以在命令行工具中通过执行命令完成相应的操作。

## 示例教程

  1.安装kfront-base依赖包

  全局安装kfront-base：

    Windos系统下运行命令：$ npm install -g generator-kfrontbase

    Linux系统下运行命令：$ sudo npm install -g generator-kfrontbase

  ![avatar](../img/install.png)

  2.创建工程

    运行命令：$ kfront-base init
    输入项目名称：my-project
    输入项目版本号：0.0.1
    选择技术栈：vue 【默认是vue(暂时提供vue，后续会增加新的技术栈),使用 arrow up/arrow down + 回车键 即可完成选中】
    选择安装组件库：kfront-base 【默认安装kfront-base,可根据项目需要自行选择，只需输入 y/n + 回车键 即可完成选择,等待几秒钟项目文件被创建成功】

  ![avatar](../img/init.png)
  ![avatar](../img/init1.png)
  ![avatar](../img/init2.png)
  ![avatar](../img/init3.png)
  ![avatar](../img/init4.png)

  3.添加插件

    运行命令：$ kfront-base add-plugin
    选择是给哪个子工程添加插件：输入 arrow up/ arrow down + 回车键 【等待依赖包安装完成】
    输入插件名称：jstree,echarts 【添加多个插件时用逗号分隔】

  ![avatar](../img/add-plugin.png)
  ![avatar](../img/add-plugin1.png)
  ![avatar](../img/add-plugin2.png)
  ![avatar](../img/add-plugin3.png)
  ![avatar](../img/add-plugin4.png)

  4.查看已有的插件

    运行命令：$ kfront-base query-plugin

  ![avatar](../img/query-plugin.png)

  5.删除插件

    运行命令：$ kfront-base delete-plugin
    输入插件名称：jstree,echarts 【删除多个插件时用逗号分隔】
    确认要删除的插件：输入 y/n + 回车键 【删除多个插件时会提示某个子工程依赖某个要删除的插件，请仔细查看提示后再做删除】

  ![avatar](../img/delete-plugin.png)
  ![avatar](../img/delete-plugin1.png)
  ![avatar](../img/delete-plugin2.png)
  ![avatar](../img/delete-plugin3.png)


  6.添加子工程

    运行命令：$ kfront-base add-app
    输入子工程名称：app01

  ![avatar](../img/add-app.png)
  ![avatar](../img/add-app1.png)
  ![avatar](../img/add-app2.png)

  7.查看已有的子工程

    运行命令：$ kfront-base query-app

  ![avatar](../img/query-app.png)


  6.删除子工程

    运行命令：$ kfront-base delete-app
    请输入要删除的子工程名称【删除多个子工程以逗号分隔】:app01,app02
    确认删除的子工程: 输入 y/n + 回车键 【直接按下回车键并不会删除子工程】

  ![avatar](../img/delete-app.png)
  ![avatar](../img/delete-app1.png)
  ![avatar](../img/delete-app2.png)

  7.更新kfront-base

    运行命令：$ kfront-base update

  ![avatar](../img/update.png)
  ![avatar](../img/update1.png)

## 注意事项

  1.项目目录结构创建成功后，项目根目录下会生成kfront-base的配置文件kfront-base.json，请不要删除该文件。

  2.除“kfront-base init”命令之外的所有命令必须在项目根目录下执行。

  3.如果您要启动项目服务，请使用新的命令行窗口运行：npm run dev。

  4.kfront-base命令使用的顺序告知：

    (1) kfront-base init

    (2) kfront-base install

    (3) kfront-base add-plugin 或者 kfront-base add-app

    (4) kfront-base query-plugin 或者 kfront-base query-app
    或者 kfront-base delete-plugin 或者 kfront-base delete-app

    (5) kfront-base update

## License
MIT



** 以下内容为老版本教程 **
### 路由
路由是页面之间的跳转逻辑，对于SPA来说，以Vue技术栈为例，路由通过vue-router实现。
在MPA中，路由是html页面之间的跳转，通过原生a链接跳转即可。

> SPA--Single Page Application

> MPA--Multi Page Application

#### 单页路由的配置
在项目中，每个app有自己独立的路由配置文件，以main（主app）为例，其路由配置所在目录为：

```
main/router/index.js
```
有关vue-router的使用，详情请参考：
[vue-router](https://router.vuejs.org/)
或
[vue-router中文](https://router.vuejs.org/zh/guide/#html)

#### 多页路由的配置
形如：
```
<a href="/app01.html#/device-manager"></a>
```

### 新建app

当项目需要新建一个app，用以扩充更多更重的功能模块时，需要进行如下配置（v1.0.×版本）：

1、复制app01目录（该目录用来做模板，建议保留），粘贴，根据需要取名，比如records（历史记录）

2、修改webpack配置

文件目录地址：build/webpack.base.conf.js

具体修改，详见下图：

![avatar](../img/img01.png)

![avatar](../img/img02.png)

![avatar](../img/img03.png)

![avatar](../img/img04.png)

3、替换records（新app）中引入路径

在目录records全局搜索“app01”，将所有引用路径替换为“records”

### 常用路径引用

为了方便开发者引入具体的目录，在webpack.base.conf.js中配置目录别名，具体如下图：

![avatar](../img/img05.png)

在相应app中如果需要引入这些目录，可通过下图中的方式处理：

![avatar](../img/img06.png)