使用 Vue.js Grails 配置文件
本指南介绍 Grails 的 Vue.js 配置文件。
作者：Zachary Klein
Grails 版本 3.3.3
1 培训
Grails 培训 - 由创建和积极维护 Grails 框架的人员开发和交付！
2 入门
在本指南中，您将使用 Grails 的 Vue 配置文件 创建一个应用程序。此配置文件将生成一个多项目构建，包括一个 Grails 应用程序和一个 Vue.js 前端应用程序，后者可以访问 Grails 提供的 RESTful API。
此配置文件将生成两个应用程序，server 和 client。server 将是一个使用 rest-api 配置文件构建的 Grails 3 应用程序，其中包括对创建域资源、Restful 控制器和 JSON 视图的支持。
client 是一个使用 Vue-CLI (使用 webpack 模板) 生成的独立 Vue.js 应用程序。client 应用程序包括使用 Vue-Router 和 UIV (Bootstrap) 库实施的完整 UI，并且配置为通过 REST 与 Grails 后端进行通信。client 项目还包括一个正在运行的测试套件（单元和端到端测试）以及用于构建和测试应用程序的脚本 - 请参阅 vue-cli 模板文档 以了解更多信息。
2.1 您需要
要完成本指南，您需要以下内容
-
10 分钟或更短时间
-
已安装 Grails 3.2.1 或更高版本
-
已安装 JDK 1.7 或更高版本，且
JAVA_HOME已适当配置
3 生成应用程序
要开始使用此配置文件，请在生成应用程序时指定此配置文件
$ grails create-app myApp --profile=vue您还可以使用 Application Forge 生成您的项目，可以从 Web 界面生成，也可以使用以下 curl 命令生成
curl -O start.grails.org/myApp.zip -d version=3.3.3 -d profile=vue查看目录结构 - 您将看到一个典型的 Gradle 多项目构建，其中包含单独的客户端和服务器项目。
drwxr-xr-x 9 zak staff 306 Nov 1 13:15 client
drwxr-xr-x 3 zak staff 102 Nov 1 13:10 gradle
-rwxr--r-- 1 zak staff 4971 Nov 1 13:10 gradlew
-rwxr--r-- 1 zak staff 2314 Nov 1 13:10 gradlew.bat
drwxr-xr-x 8 zak staff 272 Nov 1 13:12 server
-rw-r--r-- 1 zak staff 26 Nov 1 13:10 settings.gradleserver 项目是我们的 Grails 应用程序。该配置文件将使用 rest-api 配置文件生成 Grails 应用程序，该配置文件支持将域类创建为 restful 资源，默认启用 CORS，以及 JSON 和标记视图 。
client 是我们的 Vue 应用程序。
-rw-r--r-- 1 zak staff 44412 Nov 1 13:10 README.md
-rw-r--r-- 1 zak staff 669 Nov 1 13:10 build.gradle
-rw-r--r-- 1 zak staff 404 Nov 1 13:10 package.json
drwxr-xr-x 4 zak staff 136 Nov 1 13:10 public
drwxr-xr-x 10 zak staff 340 Nov 1 13:10 srcclient 项目结构（除了特定于配置文件的 build.gradle 之外）都得益于 Vue-CLI 的 webpack 模板，并包含一个非常好的 README 文件。简而言之，src/ 目录是放置 Vue 源代码的位置，子目录包含 /components、/assets 和 config 。
static 目录用于公共资源，希望可以在 Vue 应用程序中使用这些资源，而不会被 webpack 捆绑。还有一个根目录 index.html 文件，该文件用于生成 Vue 应用程序的主页。同样，请参阅 Vue-CLI 模板文档 了解更多信息。
如果您编辑文件 config/dev.env.js，将看到该配置文件已经向模板默认值添加了一个其他配置属性
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
SERVER_URL: '"http://localhost:8080"' (1)
})| 1 | SERVER_URL 指向 server Grails 应用程序的默认地址，并用作 Vue 应用程序中 REST 调用 的基本 URL。 |
您可以更改现有的配置属性或向此文件中添加新的属性; 它们将适用于“开发”环境（请注意，client 环境基于 client/package.json 中的脚本，并且与 Grails 的环境无关）。
4 运行应用程序
此配置文件还定义了一组自定义的 Gradle 任务，包括用来启动客户端应用程序的 bootRun 任务。您可以分别启动服务器和客户端应用程序
./gradlew server:bootRun这将启动 Grails 应用程序，其在 http://localhost:8080 中可用。
./gradlew client:start这将为 Vue 应用程序启动开发服务器，该服务器在 http://localhost:3000 中可用。
客户端 build.gradle 文件还包括一个 bootRun（为与 server 项目保持一致），这意味着您可以利用 Gradle 的并行执行，使用一个命令来运行客户端和服务器应用程序
./gradlew bootRun -parallel还有更多的几个 client 任务“包装”了 package.json 中的 npm 脚本，用于构建和测试 Vue 应用程序。如果您已经安装了 npm，可以使用 Gradle 包装器运行它们，也可以直接运行脚本。
$ ./gradlew client:test
$ ./gradlew client:build$ npm test
$ npm run build再次请参阅 模板文档，了解更多关于如何利用这些脚本以及由 Vue-CLI 提供的其他功能的信息。
别忘了查看 Grails Vue Profile 文档以了解更多信息。