Generating an application with Vue.js client-side

In this section, we'll learn how to install the official JHipster blueprint for Vue.js. You will need to open the Terminal application to run the following commands:

  1. Run npm install -g generator-jhipster-vuejs on a Terminal to install it. Once the installation is complete, we can create a Vue.js application with JHipster using the blueprint. 
  1. Create a new folder and navigate to it by running mkdir jhipster-vuejs && cd jhipster-vuejs.
  2. Now, run the jhipster --blueprints vuejs command in the Terminal. The --blueprints flag is used to specify the blueprints that JHipster needs to use.
  3. JHipster will start with some prompts; let's select the default options for everything except for the build tool and test frameworks. For the question Which *Framework* would you like to use for the client?, you can see that there is only Vue.js presented as an option since we provided the blueprint. Also, you will see a message, info Using blueprint generator-jhipster-vuejs for client subgenerator, noting that the blueprint is being used.
  4. Once all the prompts have been completed, JHipster will generate the application and start installing dependencies before starting the webpack build.

Our selected options will look as follows:

? Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? What is the base name of your application? jhvue
? What is your default Java package name? com.mycompany.store
? Do you want to use the JHipster Registry to configure, monitor and scale your application? No
? Which *type* of authentication would you like to use? JWT authentication (stateless, with a token)
? Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
? Which *production* database would you like to use? MySQL
? Which *development* database would you like to use? H2 with disk-based persistence
? Do you want to use the Spring cache abstraction? Yes, with the Ehcache implementation (local cache, for a single node)
? Do you want to use Hibernate 2nd level cache? Yes
? Would you like to use Maven or Gradle for building the backend? Gradle
? Which other technologies would you like to use? (Press <space> to select, <a> to toggle all, <i> to invert selection)
info Using blueprint generator-jhipster-vuejs for client subgenerator
? Which *Framework* would you like to use for the client? Vue.js
? Would you like to use a Bootswatch theme (https://bootswatch.com/)? Default JHipster
info Using blueprint generator-jhipster-vuejs for common subgenerator
? Would you like to enable internationalization support? Yes
? Please choose the native language of the application English
? Please choose additional languages to install Hindi
? Besides JUnit and Jest, which testing frameworks would you like to use? Protractor
? Would you like to install other generators from the JHipster Marketplace? No
info Using blueprint generator-jhipster-vuejs for languages subgenerator

Installing languages: en, hi

That's it; we are done. Our first JHipster Vue.js application was created successfully. Now, let's start the application so that we can play around with it.

Since we chose Gradle to build our application, let's start our server by running ./gradlew in a Terminal.

Gradle will download the necessary dependencies and start the Spring Boot application using the embedded Undertow container. Once the application starts successfully, we will see the following output in the console:

2018-03-04 16:37:48.096 INFO 4730 --- [ restartedMain] com.mycompany.store.JhvueApp : 
----------------------------------------------------------
Application 'jhvue' is running! Access URLs:
Local: http://localhost:8080
External: http://192.168.2.7:8080
Profile(s): [swagger, dev]
----------------------------------------------------------

Visit the URL (http://localhost:8080) in your favorite browser to see the application in action:

You will see the preceding home screen, which is identical to the ones we saw for Angular and React.

Go ahead and log in using the default admin user and play around.

In the next section, we'll take a look at the technical stack.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.253.152