一键式创建React,Vue组件

栏目: 编程语言 · 发布时间: 5年前

内容简介:一键式创建React,Vue组件命令工具如有问题欢迎大家反馈修改

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 {
  
}

以上所述就是小编给大家介绍的《一键式创建React,Vue组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员的数学思维修炼(趣味解读)

程序员的数学思维修炼(趣味解读)

周颖 / 清华大学出版社 / 2014-4-1 / 45.00元

本书是一本专门为程序员而写的数学书,介绍了程序设计中常用的数学知识。本书门槛不高,不需要读者精通很多高深的数学知识,只需要读者具备基本的四则运算、乘方等数学基础知识和日常生活中的基本逻辑判断能力即可。本书拒绝枯燥乏味的讲解,而是代之以轻松活泼的风格。书中列举了大量读者都很熟悉,而且非常有趣的数学实例,并结合程序设计的思维和算法加以剖析,可以训练读者的数学思维能力和程序设计能力,进而拓宽读者的视野,......一起来看看 《程序员的数学思维修炼(趣味解读)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具