乐趣区

一键式创建ReactVue组件

mn-component-maker

一键式创建 React,Vue 组件命令工具
mn-component-maker
如有问题欢迎大家反馈修改

v1.2.1

支持自由选择创建css,scss,less

功能

  1. 一键式创建 React 组件,不是 React 脚手架!
  2. 支持一次创建多个组件
  3. 支持自由选择创建css,Scss,Less
  4. 支持无状态组建(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 {}
退出移动版