简介
@magic/cli 是一个可以帮助前端开发者快速构建和部署项目的命令行工具，支持搭建基于 React/Vue 的项目，提供了许多简化开发流程的工具包和便捷的部署方案。
安装
@magic/cli 可以直接通过 npm 来进行安装：
--- ------- ---------- --
该命令会安装最新版本的 @magic/cli 到全局环境中，您可以通过 magic -V 来查看当前版本号。
创建项目
使用 @magic/cli 来创建项目非常简单，只需要执行 magic create <project-name> 就可以了，如下示例：
----- ------ ----------
其中 my-project 是项目名称，您可以根据自己的需要进行修改。运行该命令后会有一些交互式的问题需要您回答，例如：
- 选择使用哪种框架（目前支持 React 和 Vue）；
- 是否需要自动部署到云服务器（需要事先安装 Docker 和设置云服务器）；
- 填写项目的相关信息（名称、描述等）。
本地预览
在项目根目录下执行以下命令即可启动本地开发服务器：
-- ---------- ----- ---
等待一会儿，当终端输出 Project is running at http://localhost:3000/ 后，就可以打开浏览器，输入该地址来进入项目的首页。
@magic/cli 会自动启动一个本地开发服务器，支持热更新和自动刷新，您只需要修改代码，保存后即可在浏览器中看到最新效果。
构建和部署
当项目完成后，您可以使用 @magic/cli 提供的命令来构建并部署到服务器上，具体步骤如下：
- 首先需要在项目根目录下执行以下命令，生成构建用的打包文件：
----- -----
该命令会将项目进行打包，生成生产环境下的代码，存放于 dist/ 目录下。
- 构建完成后，执行以下命令进行部署：
----- ------
该命令会根据您在创建项目时所填写的部署信息（云服务器 IP、Docker 镜像等）来将项目部署到服务器上。如果您没有填写或者需要更改相关信息，可以通过 magic config 命令来进行配置。
结语
通过本文，您可以了解到如何使用 @magic/cli 来进行项目的创建、本地预览、构建和部署，希望这些内容对您的前端开发工作有所帮助。如果您有任何疑问或者建议，欢迎在评论区与我交流。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0bf4df403f2923b035c11d