在前端开发中，有很多需要自己写的模板代码，如登录注册页面、后台管理页面等。这些模板代码虽然重要，但无论是从设计还是开发的角度来看，都是非常耗时的。为了解决这个问题，我们可以使用一个名为 generator-node-vue-admin 的 npm 包来生成一个简单易用、自动化的 Vue 后台管理系统的骨架，以优化我们的开发过程。
本文将为你提供一个使用 generator-node-vue-admin 包的详细步骤，并解释一些基本概念和配置项。让我们开始吧。
环境要求
为使用 generator-node-vue-admin npm 包，你需要安装以下依赖：
- Node.js 10 或以上版本
- Yeoman 3 或以上版本
generator-node-vue-admin 包的安装与使用
安装 generator-node-vue-admin 包：
npm install -g generator-node-vue-admin
安装完成后，我们就可以使用 yeoman 生成器创建项目骨架：
yo node-vue-admin
任何时候，如果需要了解 generator-node-vue-admin 包更多信息，都可通过命令行输入以下命令：
yo node-vue-admin --help
当你运行 yo node-vue-admin 时，包将向你询问一个序列问题，其中一些在本章和下文中被详细讨论。这些问题包括：
- 项目名称
- 项目描述
- 端口号
- 后端 api 地址
- 是否使用 Mongoose 数据库 MongoDB
- 端到端测试使用 Cypress 还是 Nightwatch
- 是否生成代码骨架
请注意，如果你需要跨域支持，你应该在询问后定义 CORS_ORIGINS 环境变量，如：
export CORS_ORIGINS=http://localhost:8080
配置选项
下面我们将进一步讨论一些 generator-node-vue-admin 包的配置选项。
项目名称和描述
当你输入 yo node-vue-admin 命令时，这些问题是来自默认模板 app/templates/_package.json，即引导文件生成器。
项目名称和描述将在 package.json 中定义，如下所示：
{
"name": "my-project",
"description": "My project description",
"version": "0.0.1",
...
}端口号
你的项目需要一个端口号，以便在浏览器中访问。默认端口号是 3000，但你可以在运行 yo node-vue-admin 时设置自己的端口号。
将使用 PORT 环境变量来激活自定义端口号。
PORT=8080 npm run dev
如果已经指定了 PORT 变量，则 npm run dev 会使用已指定的端口，否则会使用默认端口 3000。
后端 api 地址
如果你在项目中有后端服务器/RESTful API，你需要在项目中使用此地址。典型的情况下，你应该使用一个相对路径。
在开发期间，你可以使用环境变量 VUE_APP_API_URL 来激活默认地址，如：
VUE_APP_API_URL=http://localhost:8080 npm run dev
Mongoose
generator-node-vue-admin 包的用例支持 Mongoose，一个 JavaScript 后端 MongoDB 的 ODM。
如果你需要使用 Mongoose，请在运行 yo node-vue-admin 时打开 Mongoose 选项。
默认情况下，这个选项被关闭。
端到端测试
与 Mongoose 相同，generator-node-vue-admin 包默认支持 Cypress，一个前端自动化测量框架。虽然默认情况下使用 Cypress，但你可以在询问期间切换到另一个自动化测试框架，如 Nightwatch。
yo node-vue-admin --e2e-test=nightwatch
这将创建一个 Constellation 后台管理项目，并设置其用于端到端测试的 Nightwatch 配置。
生成器选项
如果你想要 generator-node-vue-admin 自己根据你的应用程序自动生成代码骨架，请在运行 yo node-vue-admin 命令时启用该选项，如下所示：
yo node-vue-admin --scaffold
这将在 Constellation 后台管理项目中创建以下目录和文件：
-- -------------------- ---- -------
-
--- ------
- --- ---
- - --- ----------
- - --- -----
- - --- -------
- - --- -------
- --- ------
- --- ----
- --- -------------
- --- ------------
- --- ----------
- --- ---------------
- --- ------------
- --- ------------
- --- ---------
- --- -------------
- --- --------------
- --- ---------
--- ------
--- ------
--- --------
--- -----
--- ------
--- ---------
--- --------
--- ------------此命令将为你的应用程序创建一个基础框架，在后续开发中，你可以添加一个更加细致的骨架。
运行项目
在生成 Constellation 后台管理项目之后，你可以开始运行它。首先，进入 server 目录并启动后端：
cd server && npm run dev
然后，进入 client 目录并启动前端：
cd ../client && npm run dev
打开浏览器，输入 localhost:3000 地址，你应该能看到你的后台管理系统。
结论
在一些简单的步骤中，我们安装了一个生成器，并使用它来创建一个符合要求的 Vue 后台管理系统。基于这个项目，你可以进一步地开发出你自己的后台管理系统，轻松精美地完成你的工作。
要掌握这种技术，我们还需要更多的实践。通过不断地尝试，掌握更多的技能，我们可以更好地应对前端开发中的各种问题，从而迅速地建立出高效的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dddef