介绍
@4c/cli 是一个基于 Node.js 平台的脚手架工具，它基于 Vue.js 和 Element 两个优秀的前端开源项目进行封装，旨在提供更快捷舒适的前端项目创建和脚手架管理体验。
@4c/cli 支持使用命令行一键创建新项目、快捷启动项目开发环境、生成构建产物等常用开发操作。同时，它还支持灵活的插件机制，可以通过插件的方式扩展和定制化工具。
本篇文章将会介绍如何使用 @4c/cli。
安装和使用
安装 @4c/cli 可以通过 npm 命令进行：
npm install -g @4c/cli
安装完成后，查看是否安装成功：
4c --version
这里我们演示一键创建项目的基本使用方法：
4c create my-project
运行这个命令后，命令行会提示一些基本选项，您可以根据需要选择或输入相关参数。在选择完毕后，工具会开始安装依赖和生成文件目录。
安装完成后，进入 my-project 目录：
cd my-project
然后在此目录下启动开发服务器：
npm run serve
默认情况下，应用程序可以通过浏览器访问 http://localhost:8080 来查看。
插件扩展
@4c/cli 支持通过插件机制来进行功能扩展。开发者可以通过编写插件来增强脚手架功能，例如添加新的命令、任务、配置等。
下面以一个 h5banner-template 插件为例进行介绍。
安装插件
首先，我们需要安装 h5banner-template 插件：
npm install -g @4c/plugin-h5banner-template
然后，我们需要将该插件添加到项目中：
4c add h5banner-template
这个命令会在工程根目录下生成 .4c/h5banner-template 目录，包含一个最基本的示例 banner。
使用插件
在项目中使用插件需要创建一个新组件，然后在其中添加插件的配置即可使用插件。
-- -------------------- ---- -------
----------
--------- ------------ ------------------------------
-----------
--------
------ - -------- - ---- -------------------
------ ------- -
----------- -
----------- --------
--
---- -- -
------ -
----- -----
-------- ----
-
-
-
---------注意，在使用插件之前，需要先安装相关依赖，例如上面的 h5banner-template。
打包和部署
@4c/cli 支持快速生成生产环境的构建代码。
在项目根目录下，运行如下命令：
npm run build
该命令会编译并生成静态资源文件，最终生成的结果在 dist 文件夹中。
现在，您可以将 dist 目录中的文件部署到您喜欢的地方。
总结
本文介绍了 @4c/cli 的使用方法，包括安装、创建项目、使用插件、打包和部署等常用操作。希望这篇文章能够帮助您更快捷和高效地创建和管理前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4a8b5cbfe1ea061131e