使用 Vue.js Grails 概要
本指南介绍 Grails 的 Vue.js 概要。
作者：Zachary Klein
Grails 版本 4.0.1
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 项目还包括一个正常运行的测试套件（单元和 e2e 测试）以及用于构建和测试应用程序的脚本 - 请参阅 vue-cli 模板文档 以获取更多信息。
2.1 您将需要
要完成本指南，您将需要以下内容
-
10 分钟或更短的时间
-
已安装 Grails 4.0.1 或更高版本
-
已安装 JDK 1.8 或更高版本，并已适当地配置了
JAVA_HOME
3 生成应用程序
要开始使用此概要，请在生成应用程序时指定该概要
$ grails create-app myApp --profile=vue您还可以使用 Application Forge 来生成您的项目，可以使用 web 界面或使用以下 curl 命令
curl -O start.grails.org/myApp.zip -d version=4.0.1 -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 应用程序的 dev 服务器，您可以在 http://localhost:3000 找到此应用程序。
客户端 build.gradle 文件还包括一个 bootRun（为了与 server 项目一致），这意味着您可以利用 Grails 的并行执行，使用一个命令同时运行客户端和服务器应用程序
./gradlew bootRun -parallel还有几个 client 任务，用于“包装”package.json 中的 npm 脚本，以构建和测试 Vue 应用程序。您可以使用 Gradle 包装程序运行这些脚本，或者，如果您已安装 npm，可以直接运行这些脚本。
$ ./gradlew client:test
$ ./gradlew client:build$ npm test
$ npm run build同样，请参阅 模板文档 了解有关利用这些脚本和 Vue-CLI 提供的其他功能的更多信息。
别忘了查看 Grails Vue Profile 文档以了解更多内容。