一鍵式創建React，Vue組件

mn-component-maker

一鍵式創建React，Vue組件命令工具
mn-component-maker
如有問題歡迎大家反饋修改

v1.2.0

支持自由選擇創建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 {
  
}