简介
generator-mish-component-folder 是一款基于 Yeoman 的 npm 包，可以快速搭建一个前端组件的文件目录结构，包括 CSS、JS、HTML 等文件，方便组件开发和维护。
安装
在全局安装 Yeoman 后，可以通过 npm 安装 generator-mish-component-folder：
npm install -g yo npm install -g generator-mish-component-folder
使用
进入想要新建组件的目录后，执行 yo mish-component-folder 命令，会出现以下提示：
[?] Component name: // 输入组件名称，如 my-component [?] Select stylesheet: // 选择 CSS 预处理器，如 Sass [?] Create documentation: // 是否创建 README.md 文件，用于说明组件使用方法和示例
根据需要输入组件名称、选择 CSS 预处理器和是否创建 README.md 文件。输入结束后，会自动生成以下文件和目录：
├── my-component.html
├── my-component.js
├── my-component.scss
├── README.md (可选)
└── demo
├── index.html
└── index.js其中，my-component.html、my-component.js 和 my-component.scss 文件是组件的核心文件，放置于根目录下。README.md 文件用于说明组件的使用方法和示例，放置于根目录下。demo 目录下是一个简单的示例页面，用于展示组件的效果。
示例
以下是一个简单的示例，演示如何使用 generator-mish-component-folder 新建一个组件 my-component：
-- -------------------- ---- -------
- ----- ------------
- -- ------------
- -- ---------------------
-------
- - ----------------------------
--------- - ---- --------- -
----------- - -
- ----- - - ------ --------- --- ------ -
--------- -- -------- ----- -
- - - ----------------------------
-----------
- - -- - - -
- --------- ----- ------------
- ------ ----------- ----
- ------ -------------- ---
------ -----------------
------ ---------------
------ -----------------
------ ---------
------ ---------------
------ -------------生成的文件和目录结构如下：
my-component/
├── my-component.html
├── my-component.js
├── my-component.scss
├── README.md
└── demo
├── index.html
└── index.js组件的核心文件 my-component.html、my-component.js 和 my-component.scss 分别包含组件的 HTML、JS 和 CSS 代码，放置于根目录下。README.md 文件用于说明组件的使用方法和示例，放置于根目录下。demo 目录下是一个简单的示例页面 index.html，用于展示组件的效果。
结语
通过 generator-mish-component-folder，可以快速搭建一个前端组件的文件目录结构，方便组件开发和维护。在实际开发中，可以根据需要修改和扩展组件的核心文件和示例页面，使其更符合自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005539681e8991b448d0ca7