内容简介:一键式创建React,Vue组件命令工具如有问题欢迎大家反馈修改
mn-component-maker
一键式创建React,Vue组件命令工具
如有问题欢迎大家反馈修改
v1.2.1
支持自由选择创建 css
, scss
, less
功能
- 一键式创建React组件,不是React脚手架!
- 支持一次创建多个组件
-
支持自由选择创建
css
,Scss
,Less
- 支持无状态组建(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组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 创建 React 组件三种“姿势”
- 使用TypeScript开发React应用(二) - 创建组件
- 使用TypeScript开发React应用(三) - 创建状态组件
- 使用 React Hooks 创建可复用的动画组件
- Angular7创建项目、组件、服务以及服务的使用
- React Hook 日常使用,一步步创建一个可排序表格组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++ Primer 中文版(第 5 版)
[美] Stanley B. Lippman、[美] Josée Lajoie、[美] Barbara E. Moo / 王刚、杨巨峰 / 电子工业出版社 / 2013-9-1 / CNY 128.00
这本久负盛名的 C++经典教程,时隔八年之久,终迎来史无前例的重大升级。除令全球无数程序员从中受益,甚至为之迷醉的——C++ 大师 Stanley B. Lippman 的丰富实践经验,C++标准委员会原负责人 Josée Lajoie 对C++标准的深入理解,以及C++ 先驱 Barbara E. Moo 在 C++教学方面的真知灼见外,更是基于全新的 C++11标准进行了全面而彻底的内容更新。......一起来看看 《C++ Primer 中文版(第 5 版)》 这本书的介绍吧!