内容简介:一键式创建React,Vue组件命令工具如有问题欢迎大家反馈修改
mn-component-maker
一键式创建React,Vue组件命令工具
如有问题欢迎大家反馈修改
v1.2.1
支持自由选择创建 css
, scss
, less
功能
- 一键式创建React组件,不是React脚手架!
- 支持一次创建多个组件
-
支持自由选择创建
css
,Scss
,Less
- 支持无状态组建(stateless function)
Usage
React组件创建使用
#React组件创建使用 npm i -g mn-component-maker mkcomponent App #此时你创建了一个名字为App的组件 mkcomponent Header,Body,Footer #此时你创建了三个组件,分别为Header,Body,Footer
Vue组件创建使用
#Vue组件创建使用 npm i -g mn-component-maker mkcomponent -l Body -t vue #此时你创建了一个名字为Body的组件
创建样式为Scss的组件
mkcomponent -s Body //创建Body组件,但是样式文件为Scss
创建样式为Less的组件
#### mkcomponent -l Body //创建Body组件,但是样式文件为less
React组件详情
一个组件为一个文件夹,文件夹目录为
- [name].jsx
- [name].css
- index.jsx
Vue组件详情
- [name].css
- index.vue
文件内容 - React
[name].jsx
import React from 'react'; import styles from './[name].css' class [name] extends React.Component { constructor(props) { super(props); this.displayName = [name]; } render() { return ( <div className={styles.container}> [name] </div> ) } } export default [name];
[name].css
.container { }
index.jsx
import [name] from './hh' export default [name]
文件内容 - Vue
index.vue
<template> <div class="[name]"> [name]组件 </div> </template>' <script> export default { name: [name] data(){ return { } } }; </script> <style scoped lang='css' src='[name].css'> </style>
[name].css
.container { }
以上所述就是小编给大家介绍的《一键式创建React,Vue组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 创建 React 组件三种“姿势”
- 使用TypeScript开发React应用(二) - 创建组件
- 使用TypeScript开发React应用(三) - 创建状态组件
- 使用 React Hooks 创建可复用的动画组件
- Angular7创建项目、组件、服务以及服务的使用
- React Hook 日常使用,一步步创建一个可排序表格组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。