前言
随着前端技术的不断发展，越来越多的开发者开始使用各种辅助工具来提高效率和质量。其中， npm 成为了最受欢迎的包管理工具之一。而 nge-cli 则是一款基于 npm 的前端脚手架，可以帮助我们快速搭建出一个完整的前端项目架构。本文将为大家介绍如何使用 nge-cli，希望对初学者有所启发与帮助。
安装
首先，我们需要全局安装 nge-cli。打开终端窗口，输入以下命令：
npm install -g nge-cli
等待安装完成之后，我们输入以下命令，检查是否安装成功：
nge -v
如果成功安装，则会显示当前的 nge-cli 版本号。
创建项目
接下来，我们进入到要创建项目的目录下。输入以下命令：
nge create my-project
其中， my-project 是你要创建的项目名称。在执行该命令时，会下载模板文件和各种依赖项。等待下载完成后，我们就可以开始编写代码了。
项目结构
创建项目后，我们得到的是一个常规的前端项目结构。整个项目以一个根目录为基础，包含若干个子目录和文件，其结构如下：
-- -------------------- ---- ------- ----------- --- ----- - ------ --- ------------- - --- ------ --- ------- - ---- --- ---- - --- - --- ------- - ---- - --- ----------- - ---- - --- ------- - -- - --- ------ - ---- ---- - --- ------ - --- - --- ------ - ---- - --- ------- - --- --- - --- ------- - ---- - --- ---------- - ---- --- -------- - ----- -- --- ------------- - ----- --- ------------ - ------ -- --- ---------- - --- ---- --- ------------ - --- ----- --- ----------------- - --- -------- --- --------- - ------
开发流程
我们已经创建好了项目，并且了解了其结构。接下来，我们进入到开发阶段。首先，我们在 src/views 目录下创建一个名为 Home.vue 的文件，作为首页组件。
-- -------------------- ---- -------
----------
-----
----------- -- -- ------------
------
-----------
--------
------ ------- -
----- -------
-
---------
------ -------
-- -
------ --------
---------- ----
-
--------接下来，我们需要将该组件添加到路由中。我们打开 src/router/index.js 文件，并添加以下代码：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- --------------
------------------
----- ------ - -
-
----- ----
----- -------
---------- -----
--
-
----- ------ - --- -----------
----- ----------
----- ---------------------
-------
--
------ ------- ------这样，我们就实现了关键性的内容。接下来，我们可以通过以下命令，在本地启动一个服务器：
npm run serve
该命令会运行一个开发服务器，自动编译源代码并且打开网页。等待编译完成后即可在浏览器中查看自己的网站。
打包部署
最后，我们来给自己的项目打包并部署到服务器上。首先，我们需要运行以下命令来打包项目：
npm run build
该命令会生成一些静态文件和资源，并将它们打包成一个完整的网站。打包完成后，我们可以通过以下命令来运行该网站：
npm run start
我们可以通过浏览器访问 http://localhost:3000 来查看自己的网站。当然，如果需要将其安装到生产环境，则需要使用其他部署工具。
结尾
以上就是使用 nge-cli 搭建前端项目的完整流程。希望本文能对初学者提供帮助，并且带来启发。完整的代码示例可以在我的 Github 仓库找到。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625881e8991b448df972