简介
cyjh-cli 是一款用于快速构建前端项目的命令行工具。它基于 Webpack，具有自动化构建、代码压缩、打包等功能。本文将介绍如何使用 cyjh-cli 快速构建前端项目。
安装
前提条件：您已经安装好了 Node.js 环境。
在终端中使用以下命令进行安装：
npm install cyjh-cli -g
安装完毕后，运行以下命令，查看安装是否成功：
cyjh-cli -v
如果您成功看到 cyjh-cli 的版本号，安装就已经成功了。
使用
创建项目
在您想要创建项目的目录下，执行以下命令：
cyjh-cli init
运行命令后，cyjh-cli 会让你选择要用哪个模板创建项目。目前 cyjh-cli 的模板有： vue-cli、react-cli、angular-cli。
选择完毕后，cyjh-cli 会自动拉取模板并在当前目录下创建一个新的项目。
开发
进入项目目录，执行以下命令：
npm run dev
然后打开浏览器，在地址栏中输入 localhost:8080，即可访问项目。
在开发过程中，您可以根据自己的需求更改代码。每次更改后，cyjh-cli 会自动重新构建项目，无需手动刷新页面。
打包部署
在开发完成后，执行以下命令：
npm run build
cyjh-cli 会自动将项目打包到 dist 目录下。您可以将 dist 目录下的文件上传到服务器即可。
示例代码
以下是一个使用 cyjh-cli 构建的简单项目的目录结构：
├─ index.html ├─ package.json ├─ README.md ├─ src │ ├─ app.js │ ├─ App.vue │ └─ router.js └─ webpack.config.js
其中，app.js 是这个项目的入口文件，App.vue 是一个 Vue 组件。
webpack.config.js 的内容如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ---------------
------- -
----- ----------------------- --------
--------- ----------
--
----- -------------
------- -
------ -
-
----- ---------
------- ------------
-
-
-
-package.json 的内容如下：
-- -------------------- ---- -------
-
------- ----------------
---------- --------
-------------- --------- ------
------- -----------
---------- -
------ ------------------- -------- ----------------- ------ -------- -------
-------- -------- -------- ------------------
--
----------- -
----------
--
--------- -------
---------- ------
------------------ -
------------- ----------
------------------------ ----------
---------- ----------
-------------- ----------
--------------------- ---------
-
-index.html 的内容如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------------
-------
------
---- ---------------
------- ------------------------
-------
-------src/app.js 的内容如下：
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------ ------ ---- --------------
----- --- - --- -----
--- -------
-------
------- - -- ------
---src/App.vue 的内容如下：
-- -------------------- ---- -------
----------
-----
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- ----------
-
-
-
---------至此，您已经可以使用 cyjh-cli 进行前端项目的快速构建。如有疑问或建议，欢迎在评论区留言，我们将根据您的反馈进行改进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e08a9