plop的用法

2024-05-05 09:18
文章标签 用法 plop

本文主要是介绍plop的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

每次写重复的代码是不是很浪费时间呢?接下来介绍一款用命令行就可以自动生成代码的工具。

plop的介绍 https://www.npmjs.com/package/plop

1.在项目中安装plop;

npm install --save-dev plop

2.全局安装,这样就可以用plop命令了;

npm install -g plop

mac 使用 

sudo npm install -g plop

3.在项目的根目录创建plop.js文件,写入一下代码;

module.exports = function (plop) {plop.setGenerator('component', {description: '视图组件',prompts: [{type: 'input',name: 'name',message: '组件的名字, 如MyApp',validate: function (value) {if ((/([A-Z][a-z]+)+/).test(value)) { return true; }return '组件名称必须为驼峰形式';}}],actions: [/*** TemplateComponent.js*/{type: 'add',path: 'src/component/{{name}}/{{name}}.js',templateFile: 'templates/components/TemplateComponent.js'},{type: 'modify',path: 'src/component/{{name}}/{{name}}.js',pattern: /TemplateComponent/g,template: '{{name}}'},{type: 'modify',path: 'src/component/{{name}}/{{name}}.js',pattern: /template-component/g,template: '{{dashCase name}}'},/*** template-component.scss and css*/{type: 'add',path: 'src/component/{{name}}/{{dashCase name}}.css',templateFile: 'templates/components/template-component.css'},{type: 'modify',path: 'src/component/{{name}}/{{dashCase name}}.css',pattern: /TemplateComponent/g,template: '{{dashCase name}}'},{type: 'modify',path: 'src/component/{{name}}/{{dashCase name}}.css',pattern: /template-component/g,template: '{{dashCase name}}'},]});plop.setGenerator('router', {description: '路由生成器',prompts: [{type: 'list',name: 'rootPath',message: '生成路由的目录',choices: ['Routes']}, {type: 'input',name: 'routerPath',message: '路由的名字, 全部小写,用下划线分词 如:orders'}],actions: function(data){console.log(data);return [{// 配置路由文件type: 'modify',path: 'src/{{rootPath}}/index.js',pattern: /\/\/ generator import/,template: "import {{pascalCase routerPath }} from './{{ routerPath }}';\n// generator import"}, {type: 'modify',path: 'src/{{rootPath}}/index.js',pattern: /{ \/\* generator router \*\/ }/,template: '<Route path="/{{ routerPath }}"       component={ {{pascalCase routerPath}} }        desc="TODO: 该路由描述" />\n      { /* generator router */ }'}, {// 配置路由内容type: 'add',path: 'src/{{rootPath}}/{{routerPath}}/index.js',templateFile: 'templates/router/index.js'}, {type: 'add',path: 'src/{{rootPath}}/{{routerPath}}/{{pascalCase routerPath}}List.js',templateFile: 'templates/router/list.js'}, {type: 'add',path: 'src/{{rootPath}}/{{routerPath}}/{{pascalCase routerPath}}Detail.js',templateFile: 'templates/router/detail.js'}];}});
};

 

 

4.在根目录新建templates文件,在templates文件下新建components和router文件

5.在components下新建template-component.css和Templatecomponent.js文件

template-component.css
@keyframes fadeInUp {from {opacity: 0;transform: translate3d(0, 10px, 0); }to {opacity: 1;transform: none; } }.TemplateComponent {animation-name: fadeInUp;animation-duration: 1s;animation-fill-mode: both;display: flex;flex: 1; }.TemplateComponent *, .TemplateComponent :after, .TemplateComponent :before {box-sizing: border-box; }.TemplateComponent .fl {float: left; }.TemplateComponent .fr {float: right; }.TemplateComponent .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden; }.TemplateComponent .clearfix {display: inline-block; }.TemplateComponent * html .clearfix {height: 1%; }.TemplateComponent .clearfix {display: block; }.TemplateComponent ul li:hover {background: #f63;cursor: pointer; }
Templatecomponent.js
/*** Created by ${USER} on ${DATE}.* https://www.jetbrains.com/help/webstorm/file-template-variables.html 动画callback只支持1.x版本的TransitionGroup*/
import React,{Component} from 'react';
import './template-component.css';
const styles = {container: {}
};
//import ReactDOM from 'react-dom';
//import {TweenMax} from "gsap";
//import PropTypes from 'prop-types';class TemplateComponent extends React.Component {static defaultProps = {...Component.defaultProps}static propTypes = {}constructor(props){super(props)this.state = {}this.dom=React.createRef()//React.createRef();current//事件绑定在es6中用于自定义事件props事件不适用//this.handleClick = this.handleClick.bind(this);}//组件将要装载//componentWillMount(){}//组件加载完毕componentDidMount(){//this.dom.root=ReactDOM.findDOMNode(this);}//组件将接收道具//componentWillReceiveProps(nextProps){}//shouldComponentUpdate(nextProps, nextState) {}//组件将更新//componentWillUpdate(nextProps, nextState){}//组件更新完毕//componentDidUpdate(nextProps, nextState){}//组件将要卸载//componentWillUnmount(){}/*动画*///componentWillAppear(callback){}//componentDidAppear(){}//componentWillEnter(callback){}//componentDidEnter(){}//componentWillLeave(callback){}//componentDidLeave(){}render() {return (<div ref={this.dom}></div>);}
}export default TemplateComponent;

组件的模板就是以上,还可以根据自身需要定制路由。

6.在terminal中输入plop,就会让你选择是要生成组件还是路由,可根据需要选择,键入enter,再输入组件名称,就可以在模板中设置好的路径中找到文件,是不是很方便呢?

这篇关于plop的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/961341

相关文章

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Mysql中isnull,ifnull,nullif的用法及语义详解

《Mysql中isnull,ifnull,nullif的用法及语义详解》MySQL中ISNULL判断表达式是否为NULL,IFNULL替换NULL值为指定值,NULLIF在表达式相等时返回NULL,用... 目录mysql中isnull,ifnull,nullif的用法1. ISNULL(expr) → 判