创建应用之前

安装generator-jhipster-vuejs

执行命令

npm install -g generator-jhipster-vuejs

创建一个应用

快速入门

开始之前为你的应用创建一个空文件夹：mkdir jhipster-vue-demo

进入到此文件夹中：cd jhipster-vue-demo

生成你的应用,执行 jhipster --blueprint vuejs

回答你看到的问题，这些问题用于定制你的应用，稍后详细解释每个问题。

当一个应用生成好之后，你可以使用./mvnw或者./mvnw.bat来启动，（也可以使用yarn && mvn spring-boot:run来启动）

应用将在http://localhost:8080可用

生成应用时的问题

你选择的问题答案不同可能会影响到接下来的问题显示，如：你不想使用hibernate的缓存那么就不能选择sql数据库。

Q1. Which type of application would you like to create?

• Monolithic application: 单体应用
• Microservice application: 微服务架构的service
• Microservice gateway: 微服务网关，为微服务请求进行路由和安全
• JHipster UAA server: 基于OAuth2的安全认证微服务

Q2. What is the base name of your application?

你期望的应用的名称

Q3. What is your default Java package name?

应用使用的默认包名，使用Yeoman的时候此值会被存储，当下次使用的时候此值会成为默认值，可覆写此值

Q4. Do you want to use the JHipster Registry to configure, monitor and scale your application?

JHipster Registry是一个开源的工具，用于管理你正在运行的应用（微服务注册中心和统一配置中心），只有在微服务架构时才会使用

Q5. Which type of authentication would you like to use?

所有可能的答案：

• JWT authentication: 使用JSON Web Token
• HTTP Session Authentication：经典的基于session认证的机制
• OAuth 2.0 / OIDC Authentication: 使用OpenID连接服务，类似于Keycloak或者Okta
• Authentication with JHipster UAA server: 此种方式必须提前生成JHipster UAA Server (Q1的选项)，它是基于OAuth2的验证服务

Q6. Which type of database would you like to use?

你可以选择的选项：

• No database，仅使用微服务架构时可用
• An SQL database: 使用关系型数据库，将会采用Spring data jpa
• MongoDB
• Cassandra
• Couchbase

Q7. Which production database would you like to use?

选择你线上环境使用的数据库，此选项决定src/main/resources/config/application-prod.yml的配置

Q8. Which development database would you like to use?

此选项决定你src/main/resources/config/application-dev.ymlprofile的数据库配置项，你可以选择：

• H2,running in-memory,数据存储在内存中，服务停掉数据消失
• H2,with its data stored on disk,数据存储在硬盘，当前只是BETA测试且不能在Windows机器上工作
• 可以和Q7的选项一致

Q9. Do you want to use the Spring cache abstraction?

由于Spring对于Cache的允许用户使用不同的cache实现，你可以使用chcache(本地缓存)，Hazelcast(分布式缓存)或者Infinispan（另一种分布式缓存）,此选项可以提升你的应用的性能

Q10. Do you want to use Hibernate 2nd level cache?

此选项仅当你选择SQL数据库并且在Q9选择了一个缓存实现。Hibernate使用二级缓存可以更好的提升它的性能

Q11. Would you like to use Maven or Gradle?

构建此项目时将要使用的工具，Maven或者Gradle

Q12. Which other technologies would you like to use?

多选，你可以为你的应用添加多种技术，如：

• Search engine using ElasticSearch: 对于ES的支持(Spring Data Elasticsearch)
• WebSockets using Spring Websocket：使用Spring Websocket的Websocket
• Asynchronous messages using Apache Kafka：使用Apache Kafka的异步消息
• API first development using OpenAPI-generator：通过OpenAPI-generator而使你的应用采用API优先的开发模式

Q13. Which Framework would you like to use for the client?

选择使用那种客户端技术：

• Vue.js

Q14. Would you like to use a Bootswatch theme (https://bootswatch.com/)? 

您想使用Bootswatch主题(https://bootswatch.com/)吗?

选择自己想要使用的主题，上下箭头键可以查看更多选项，如果对这些主题样式不了解，可以先到https://bootswatch.com网站查看后选择。

Q15. Choose a Bootswatch variant navbar theme (https://bootswatch.com/)?

选择你所选主题下的颜色等属性

Q16. Would you like to enable internationalization support?

JHipster对于国际支持非常友好，你可以在客户端和服务端使用。但一般对于国际化要求不多的场景，可以不选择。

如果选择使用国际化，将会出现以下问题：

Q16-1.Please choose the native language of the application? 选择您的母语

Q16-2.Please choose additional languages to install?请选择想要安装的其他语言

Q17. Besides JUnit and Jest, which testing frameworks would you like to use?

默认Jhipster提供了Java单元/集成测试（spring`s Junit）和JavaScript单元测试（Karma.js），你也可以选择：

• Performance tests using Gatling，性能测试 Gatling
• Behaviour tests using Cucumber,行为测试 Cucumber
• Angular integration tests with Protractor, angular集成测试Protractor

Q18. Would you like to install other generators from the JHipster Marketplace?

是否需要去JHipster商城安装第三方插件模块

至此，Jhipster脚手架生成SpringBoot + Vue.js项目完成！以下?是我在Demo创建中所选的选项和Jhipster的一些命令拓展

生成的Vue相关目录

webapp
├── app                             - Your application(您的应用)
│   ├── account                     - Account related components(账号相关组件)
│   ├── admin                       - Administration related components(管理相关组件)
│   ├── core                        - Main components such as Home, navbar, ...(核心-主页、导航条等)
│   ├── entities                    - Generated entities(实体)
│   ├── locale                      - I18n / translation related components(I18n/翻译相关组件)
│   ├── router                      - Routing configuration(路由配置)
│   ├── shared                      - Shared elements such as your config, models and util classes(共享元素，配置、模型和工具类)
│   ├── app.component.ts            - The application main class(应用程序主类)
│   ├── app.vue                     - The application main SFC component(应用主要SFC组件)
│   ├── constants.ts                - Global application constants(全局应用程序常量)
│   ├── main.ts                     - Index script, application entrypoint(索引脚本,应用程序入口点)
│   └── shims-vue.d.ts
├── content                         - Contains your static files such as images and fonts(静态文件,图像和字体等)
├── i18n                            - Translation files(翻译文件)
├── swagger-ui                      - Swagger UI front-end(UI前端)
├── 404.html                        - 404 page(404页面)
├── favicon.ico                     - Fav icon(图标)
├── index.html                      - Index page
├── manifest.webapp                 - Application manifest(应用程序清单)
└── robots.txt                      - Configuration for bots and Web crawlers(配置机器人和网络爬虫)

命令行选项

你可以使用JHipster的一些可选命令行选项，使用jhipster app --help查看详细说明。

• --skip-cache 忽略之前记住的答案
• --skip-git 不自动生成git项目
• --skip-install不自动安装依赖
• --skip-client 跳过客户端的生成，只生成后台服务，也可以使用jhipster server代替
• --skip-client 跳过生成服务端代码，只生成客户端代码jhipster clinet代替
• --skip-user-management跳过生成用户管理代码，包含前端和后端
• --i18n 当跳过客户端代码生成时禁用或启用i18n，否则没应用
• --auth 当跳过服务端代码生成时指定认证类型
• --db 当跳过服务端代码生成时指定数据库
• --with-entities 如果已经生成了实体则重新生成一次
• --skip-checks 跳过需要工具的检查
• --jhi-prefix 添加服务、组件或路由的前缀，默认jhi
• --npm 使用npm代替Yarn
• --eperimental 启用实验特性，请注意这些特性可能不稳定
• --force 强制覆盖以存在的文件

Jhipster v6.2.0版本生成Vuejs项目时报错

 现在还未找到错误原因，所以我又把JHipster退回到了我之前的版本v6.0.1，生成项目成功！

 版本退回方法：

npm方法执行 npm install -g generator-jhipster@v6.0.1（你期望的版本）

yarn方法执行 yarn global add generator-jhipster@v6.0.1