在前端开发中，我们常常需要使用各种工具来搭建、管理项目。而使用 npm 包可以让我们轻松地实现这些目标。new-port-cli 就是一款很好的 npm 包，它可以帮助我们快速搭建一个基于 Vue.js 的项目。本文介绍如何使用 new-port-cli。
什么是 new-port-cli
new-port-cli 是一个构建 Vue.js 项目的命令行工具。它基于 webpack，能够帮助我们快速生成一个基于 Vue.js 的项目，包括 webpack 配置、Vue Router、Vuex 状态管理。
安装
首先需要安装 Node.js 和 npm，这里不再赘述。安装完成后，我们就可以使用以下命令安装 new-port-cli：
npm install new-port-cli -g
安装完成后，我们可以使用以下命令检查是否安装成功：
new-port -v
如果成功，会显示 new-port-cli 的版本号。
使用
创建项目
使用 new-port-cli 的命令来新建项目的命令格式如下：
new-port create <project-name>
比如，我们可以用以下命令创建一个名为 my-project 的项目：
new-port create my-project
在执行命令后，new-port-cli 会在当前目录下创建一个 my-project 文件夹，并在该文件夹下生成 Vue.js 项目的基本结构。
运行项目
项目创建完成后，我们可以进入 my-project 目录，使用以下命令来运行项目：
npm run serve
该命令会启动开发服务器，我们就可以在浏览器中访问 http://localhost:8080 来查看项目了。
构建项目
当我们完成项目开发后，需要把项目打包为生产环境下的文件，用于部署到服务器上。使用以下命令来构建项目：
npm run build
该命令会生成 dist 目录，并在该目录下生成生产环境下的文件。
配置
new-port-cli 的默认配置已经能够满足大部分 Vue.js 项目的需求。但是，在特殊情况下，我们需要对其进行自定义配置。new-port-cli 提供了配置文件，用于对其进行自定义配置。
以下是一份配置文件的示例：
-- -------------------- ---- -------
-------------- - -
-------- ----
---------- -------
----------- -----
-------------------- ------
---------- -
----- -----
------ -
------- -
------- ------------------------
--- -----
------------- ----
-
-
-
-当我们在项目根目录下创建一个 vue.config.js 文件，并加入以上代码后，new-port-cli 在构建项目时，就会读取该配置文件，并根据其内容进行自定义配置。
小结
本文介绍了如何使用 new-port-cli 快速构建一个 Vue.js 项目、运行和构建项目，并提供了自定义配置的示例。使用 new-port-cli 可以提高我们的开发效率，快速地搭建项目开发环境，提升我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d981e8991b448d20d0