随着前端技术的发展，前端工程化的重要性越来越被人们所认可，在这个背景下，Node.js 的诞生和 NPM 的兴起为前端工程化提供了极大的便利。npm 包 generator-nova-project 就是一个极其优秀的基于 Yeoman 框架的前端项目生成器。本篇文章将介绍如何使用 generator-nova-project 搭建一个前端项目。
1. 安装 generator-nova-project
首先，我们需要全局安装 generator-nova-project：
npm install -g generator-nova-project
2. 生成项目
在命令行中进入到项目保存的目录，然后运行以下命令：
yo nova-project
这个命令将会询问一些问题，根据自己的需要进行相应的选择，如项目名称、项目描述、作者等。
3. 选择项目模板
generator-nova-project 提供了多种项目模板供用户选择，我们可以根据自己的需要进行选择。当然，我们也可以通过修改模板的方式来创建自己的模板。以下是一些常用的模板：
- Empty：空模板，只包含一个最基础的项目结构。
- Vue.js：基于 Vue.js 框架的项目模板。
- React.js：基于 React.js 框架的项目模板。
- Angualr.js：基于 Angualr.js 框架的项目模板。
我们选用 Vue.js 模板来举例说明：
Which boilerplate would you like to use? vue react angular empty
输入 vue 后回车即可选择使用 Vue.js 模板。
4. 自定义项目模板
如果 generator-nova-project 提供的模板不能满足我们的需求，我们也可以修改模板或者新建模板。在修改或者新建模板之前，我们先看一下项目模板的目录结构：
-- -------------------- ---- ------- -------- --- -------- --- ------------ --- ---------- --- ------------- --- --------- --- ------------ --- ---- --- ------------ --- ------------ --- --- - --- ------- - --- ------ - - --- -------- - - --- ------ - - --- ----------- - --- ---------- - - --- --------- - --- ------- - --- ------ - --- -------- --- ---------展开代码
我们可以根据自己的需求来修改或者新增文件，然后将修改后的目录结构保存在本地，在新建项目的时候触发选择自定义模板命令，然后选择一份已经保存好的本地文件即可。
5. 打包项目
进入到项目目录下，运行以下命令：
npm run dev这会启动一个本地开发服务器，我们可以在浏览器中输入 http://localhost:8080 来查看项目运行情况。
运行以下命令进行项目打包：
npm run build这会将项目打包成一个静态资源文件，存放在 dist 目录下。
到这里，我们已经成功地通过 generator-nova-project 工具搭建了一个前端项目。
总结：使用 generator-nova-project 工具可以很方便地搭建一个前端项目，减少我们的重复工作量。同时，也可以通过自定义模板来满足我们的特定需求。为了使项目更好地运行，我们还需要加深对于 Vue.js、React.js、Angualr.js 等前端框架的学习，进一步提高我们的前端开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db056
