脚本宝典收集整理的这篇文章主要介绍了一键式创建React,Vue组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
mn-component-maker
一键式创建React,Vue组件命令工具
mn-component-maker
如有问题欢迎大家反馈修改
v1.2.1
支持自由选择创建css
,scss
,less
功能
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,Vue组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。