Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caoshining/component-maker
Comonent-maker
https://github.com/caoshining/component-maker
Last synced: 12 days ago
JSON representation
Comonent-maker
- Host: GitHub
- URL: https://github.com/caoshining/component-maker
- Owner: caoshining
- License: mit
- Created: 2018-11-16T05:03:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-24T03:59:26.000Z (over 4 years ago)
- Last Synced: 2024-04-22T00:42:28.978Z (7 months ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh.md
- License: LICENSE
Awesome Lists containing this project
README
# mn-component-maker
一键式创建React，Vue组件
## v1.2.8
支持自由选择创建`css`,`scss`,`less`
## 功能
1. 一键式创建React组件，不是React脚手架！
2. 支持一次创建多个组件
3. 支持自由选择创建`css`,`Scss`,`Less`
4. 支持无状态组建（stateless function）
### Usage
##### React组件创建使用
``` js
// React组件创建使用
npm i -g mn-component-maker
mkcomponent App
// 此时你创建了一个名字为App的组件
mkcomponent Header,Body,Footer
// 此时你创建了三个组件，分别为Header,Body,Footer
```
##### Vue组件创建使用
``` js
//Vue组件创建使用
npm i -g mn-component-maker
mkcomponent -l Body -t vue
//此时你创建了一个名字为Body的组件
```
#### 创建样式为Scss的组件
``` js
mkcomponent -s Body
//创建Body组件，但是样式文件为Scss
```
#### 创建样式为Less的组件
``` js
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 (
[name]
)
}
}
export default [name];
```
### [name].css
```
.container {
}
```
### index.jsx
```
import [name] from './hh'
export default [name]
```
## 文件内容 Vue
### index.vue
```
[name]组件
'
export default {
name: [name]
data(){
return {
}
}
};
```
### [name].css
```
.container {
}
```