banlg

快捷创建vue组件文件以及路由文件

update 1.0.22

支持路径组件名称
用ts重构
修复若干bug

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>: 撤销上次操作:blush:删除文件,复原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/com 
OR
$ banlg comName parentComName 
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类名 => '-'链接

能做什么

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

利于什么

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

todolist

检查根目录是否有router.js
文件末尾加回车
判断组件是否存，检查一下import
分好去掉优先级不高
单引号优先级不高

-完！

常见问题

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

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

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

4. 待补充...

Banlangenn/banlg