前端项目脚手架

使用方法

1. npm i -g sh-cli，全局安装sh-cli
2. 可选，sc cs [资源库git地址]，切换sh-cli资源库，不执行此命令则使用'gitlab:code.sohuno.com:OPEN-SOURCE/sh-lib'
3. sc u，初始化本地资源库
4. 使用此工具需要在配置文件中配置项目页面文件夹路径、组件文件夹路径、路由文件路径，否则使用默认配置

功能

命令 | 全称 | 参数 | 功能 | 备注 ------ | ------ | ------ | ------ | ------ sc i | sc init | 无 | 初始化项目 | 项目架构需要一起研究，目前不建议使用 sc nv | sc new_view | 无 | 新建页面 | 详细用法见命令详解 sc nc | sc new_component | 无 | 新建组件 | 详细用法见命令详解 sc c | sc component | [不加参数or组件名or关键词] | 安装组件库中的组件 | 详细用法见命令详解 sc f | sc function | [不加参数or函数名or关键词] | 拷贝函数库中的函数 | 详细用法见命令详解

命令详解

• sc cs或sc change_source
  • 切换sh-cli资源库，默认使用'gitlab:code.sohuno.com:OPEN-SOURCE/sh-lib'
  • 想使用自己定义的资源库，可以使用该命令，参数为自己定义的资源库git地址
• sc u或sc update
  • 下载sh-cli资源库中的文件到本地，本地资源库陈旧或不存在时，需要执行该命令
• sc i或sc init
  • 初始化项目，一定要先建好项目文件夹，进入项目文件夹再使用该命令，可以根据提示进行项目配置
  • 如果当前文件夹不为空，不能初始化项目
  • 工具会自动安装好项目依赖、初始化git
• sc nv或sc new_view
  1. 新建页面，执行命令后会提示输入文件名称，可省略.vue；支持“子文件夹/子文件夹/文件名”这种格式，以在页面文件夹的子文件夹下添加文件
  2. 如果名称重复会提示重新输入；如果文件夹不存在会创建文件夹
  3. 接下来会拷贝模板Vue文件到相应的文件夹，修改文件内vue实例的name属性为文件名称，并自动识别使用scss还是less
  4. 拷贝模板Vue文件成功后会提示输入新建页面路由，如果为空，则不会自动向路由文件中添加路由
  5. 如果新建页面路由不为空，会继续提示输入新建页面父级路由；如果新建页面父级路由为空，则在顶级路由下添加路由，否则添加路由到父级路由（参考了强强在mp后台写的一个小工具）
• sc c或sc component
  • 从组件库中引入组件
  • 直接执行sc c，列出所有sh-cli资源库中的组件，上下方向键选择其中的一个并安装
  • 执行sc c upload，参数中没有“,”，表示只安装一个组件。内部逻辑是：查询本地资源库中是否有名称以“up”开头的组件或者关键词为“up”的组件，没有匹配到会有信息提示，匹配到一个会直接安装，匹配到多个会列出所有匹配到的组件，上下方向键选择其中的一个并安装
  • 执行sc c upload,a，参数中有“,”，表示安装多个组件，相当于执行sc c up && sc c a
  • 选择好组件后，会执行和sc nv中1、2、3类似的步骤
  • 拷贝模板Vue文件成功后会提示输入哪个页面需要引入该组件，页面地址输入规则与sc nv中1相同；页面地址不存在会提示重新的输入；输入为空则跳过自动向页面中引入组件
  • 输入不为空，会向页面文件中引入组件，向vue实例的components属性添加组件，同时拷贝组件标签（包括props、事件）到剪贴板
• sc nc或sc new_component
  • 新建组件，相当于执行sc c Component
• sc f或sc functiion
  • 拷贝函数到剪贴板
  • 直接执行sc f，列出所有sh-cli资源库中的函数，上下方向键选择其中的一个并拷贝到剪贴板
  • 执行sc f deboun，查询本地资源库中是否有名称以“deboun”开头的函数或者关键词为“deboun”的函数，没有匹配到会有信息提示，匹配到则拷贝函数到剪贴板

备注

• 上面提到的组件库、函数库、配置文件都在sh-cli资源库中，大家可以克隆到本地。如果需要添加组件、函数，或者新增项目配置，只需要修改、提交、push到远端，执行sc u就可以使用了
• 项目中遇到比较常见的组件、函数，请大家按上述方法积极添加到库中去哈，方便自己和团队中的小伙伴使用