You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
And the [introduction phrase](https://vuejs.org/v2/guide/index.html) sounds really great:
20
+
21
+
> Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
22
+
19
23
So I think, it could be a good idea to invest a day or so into Vue.js. Let´s have a look here!
20
24
21
25
@@ -32,6 +36,19 @@ So I think, it could be a good idea to invest a day or so into Vue.js. Let´s ha
32
36
33
37
`npm install --global vue-cli`
34
38
39
+
## Project setup
40
+
41
+
```
42
+
spring-boot-vuejs
43
+
├── backend --> backend module with Spring Boot stuff
44
+
│ ├── src
45
+
│ ├── pom.xml
46
+
├── frontend --> frontend module with Vue.js stuff
47
+
│ ├── pom.xml
48
+
├── pom.xml --> Maven parent pom with modules
49
+
```
50
+
51
+
35
52
## Backend
36
53
37
54
Go to https://start.spring.io/ and initialize an Spring Boot app with `Web` and `Actuator`. Place the zip´s contents in the backend folder.
@@ -47,6 +64,83 @@ This will initialize an project sceleton for Vue.JS in /frontend directory - it
If you want to learn more about installing Vue.js, head over to the docs: https://vuejs.org/v2/guide/installation.html
68
+
69
+
### Use frontend-maven-plugin to handle NPM, Node, Bower, Grunt, Gulp, Webpack and so on :)
70
+
71
+
If you´re a backend dev like me, this Maven plugin here https://github.com/eirslett/frontend-maven-plugin is a great help for you - because, if you know Maven, that´s everything you need! Just add this plugin to the frontend´s `pom.xml`:
72
+
73
+
```
74
+
<build>
75
+
<plugins>
76
+
<plugin>
77
+
<groupId>com.github.eirslett</groupId>
78
+
<artifactId>frontend-maven-plugin</artifactId>
79
+
<version>1.5</version>
80
+
<executions>
81
+
<!-- Install our node and npm version to run npm/node scripts-->
<arguments>config set registry https://registry.npmjs.org</arguments>
102
+
</configuration>
103
+
</execution>
104
+
<!-- Set SSL privilege -->
105
+
<execution>
106
+
<id>npm set non-strict ssl</id>
107
+
<goals>
108
+
<goal>npm</goal>
109
+
</goals>
110
+
<!-- Optional configuration which provides for running any npm command -->
111
+
<configuration>
112
+
<arguments>config set strict-ssl false</arguments>
113
+
</configuration>
114
+
</execution>
115
+
<!-- Install all project dependencies -->
116
+
<execution>
117
+
<id>npm install</id>
118
+
<goals>
119
+
<goal>npm</goal>
120
+
</goals>
121
+
<!-- optional: default phase is "generate-resources" -->
122
+
<phase>generate-resources</phase>
123
+
<!-- Optional configuration which provides for running any npm command -->
124
+
<configuration>
125
+
<arguments>install</arguments>
126
+
</configuration>
127
+
</execution>
128
+
<!-- Build and minify static files -->
129
+
<execution>
130
+
<id>npm run build</id>
131
+
<goals>
132
+
<goal>npm</goal>
133
+
</goals>
134
+
<configuration>
135
+
<arguments>run build</arguments>
136
+
</configuration>
137
+
</execution>
138
+
</executions>
139
+
</plugin>
140
+
</plugins>
141
+
</build>
142
+
```
143
+
50
144
### tell Webpack to output the dist/ contents to target/
51
145
52
146
Commonly, node projects will create a dist/ directory for final builds which contains the minified source code of the web app - but we want it all in `/target`. Therefore go to `frontend/config/index.js` and replace the following lines:
0 commit comments