banlg

banlg  comName  ?parentComName ?-t
根据命令
 1.更新router配置文件
 2.创建对应组件文件结构
 3.可自定义vue和css 模板
 4.接入现有项目，无需任何更改
 5.强制统一命名风格与组件结构，保障项目规范
 6.可撤销上次操作,让你无后顾之忧

Installation

$ npm install banlg -g 
$ yarn global add banlg
（mac 遇到权限问题,在安装命令前加  sudo 即可）

API

banlg comName ?parentComName ?-t

• comName <String>: 将要创建组件名称
• parentComName <String>: 父组件名称(可选)
• -t <flag>: 是否插入当前父组件文件夹(可选)
  😊? 代表可选参数 命令和路由是有对应关系的

banlg -re

• -re <flag>: 撤销上次操作😊删除文件,复原router，挽救于水火之中( 只能撤销一次,并且无法反向回退：慎用)

banlg命令用于生成vue体系结构组件。

Option	Description	Required	Default value
banlg	命令主体	true	N/A
comName	生成的vue体系结构组件的名称(可以包含路径)	true	N/A
parentComName	vue体系结构父组件的名称(不能包含路径)	false	N/A

Example usage:

$ banlg comName 
OR
$ banlg comName parentComName 
OR
banlg comName/com 
OR
banlg comName/com parentComName
OR
$ banlg comName parentComName -t
OR
$ banlg re

自定义组件模板

项目根目录[src同级]，可自定义组件模板:vue.bl css.bl，
模板内会传入下列变量，用{{xxxxxx}} 接收

• componentName: 小驼峰组件名称
• ComponentName：大驼峰组件名称
• toLowerLineCN: 中线组件名称

例如：组件名称(banLanGen)：=> banLanGen => BanLanGen => ban-lan-gen

vue模板例子（css亦是如此）：
  <template>
      <div class="{{toLowerLineCN}}"></div>
  </template>
  <script>
  export default {
      name: '{{ComponentName}}',
  }
  </script>
  <style lang='scss' >
      @import './css/{{componentName}}.scss';
  </style>

内部命名规范

组件名称、组件文件名称 => 大驼峰
路由path、class类名 => '-'链接

能做什么

1. 根据命令行创建 组件目录并初始化文件内容
2. 按需引入组件
3. 修改router配置（美其名曰：解放双手
4. 自动区别path命名：routes[0].path='/' children[0].path=''

利于什么

• 用来规范团队的 -- 组件.路由.路由路径.命名(防止某些人起名字【胡里花哨】的)
• 节省一些（微微一些）人力，不用去创建文件和文件夹一节修改router配置文件
• 缩减一些（微微一些）项目周期
• 可撤销，让你无后顾之忧
• 接入现有项目，无需任何更改

-完！

常见问题

1. 需要准备什么前置文件？答：跟着提示做就行。

2. 在什么文件夹下能用？答：项目内就行。

3. 旧项目能用吗？答：能！（符合vue约定目录router/views）

4. 待补充...