Home>

I would like advice on environment construction using the following.

Type name
Web server Apache
Server-side language PHP
PHP framework Slim
Frontend Vue.js (VueCLI)
Consultation content

When using vue files with Vue.js, we generally recognize that VueCLI builds the environment (we know that we can build the environment from scratch).

However, in any introductory article, I have never seen a pattern that would be used in combination with a server-side language when implementing VueCLI.

I wanted to know how to use PHP in combination with VueCLI when using PHP as a server-side language.

For example, when considering a directory structure with a combination of PHP and Slim framework, we are thinking as follows.

* The following Project is the root unit (one build unit) in NetBeans and Eclipse.

Project
 |
 + src (PHP source)
 + public (public directory)
    + index.php
    + assets
      |
      + js
      + css
      + img
I want to check
  • What kind of directory structure is better when VueCLI is used in combination with the above directory?

  • In the first place, is Project separate on the client (Vue.js) and server side (PHP)?

  • In a common sample, start the node.js web server, access 8080, and display the page there. Apache + PHP is used to check the operation during development. I want to use it. In such a case, is it possible to check the operation speedily by combining hot reloading (which can be confirmed immediately after editing the vm file)?


The front end has experienced Knockout.js, AngularJS, and Vue.JS (no use of vue files), but it has entered the area where Vue.js builds vue files. Since then, I feel that it has become very difficult.

In addition to the opinions of respondents, if you know information about books, sites, etc. that mention the combination of server side and VueCLI, please let me know.

  • Answer # 1

    There are many SPA examples in the example of using VueJS, and it is common to serve HTML with node, but of course Vue should be used if HTML is served without using node. I can.

    I am currently using Vue with HTML output on the Java side and Java on the server side.

    Vue single file components (.vue) cannot be called from HTML as they are, so you need to compile them (webpack or browserify) into (.js) files. After that, if you call the output .js as in<script src ="/dist/app.js"></script>It ’s good.

    I think the project structure is as follows. (Transpiler assumes webpack)

    Project
     |
     + src (PHP source)
     + vue (folder created with vueJS source VueCLI)
     + + main.js
     | + app.vue
     | + webpack.config.js
     | + package.json
     | + node_modules
     + public (public directory)
        + index.php
        + assets
          |
          + js
          + css
          + img
          + dist (Vue source compiled output destination specified in webpack.config.js)
                 The output destination may be assets/js, but it is separated to distinguish

    The output folder is specified in webpack.config.js, so you can change it there.

    Learn how to use the webpack configuration file "webpack.config.js"-Change output folder and file name

    I think that HotReload can be done if there is such a function in Slim, probably to specify the folder to be monitored ...
    Unfortunately, I have no experience with Slim, so I don't know the details.
    By the way, I'm using Java's SpringBoot framework and have HotReload functionality
    Hot reloading is possible because the folder of the compilation result of the Vue source is the monitoring target.