Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Leading Economist + ... пиктограмма - Как-то Так THIS     Economic literacy and web solutions
All on the topic: what, how and why. Actual things - in their own words.
Turn your quality WITH ME - BUTW !
If you don't like what you get, change what you give. © Carlos Castaneda     KAKTOTAK.BY - economic design and web development services (php/js - telegram, WordPress, Laravel, Vue, SEO)    Cooperation - on an ongoing basis    Be in the topic   -    SUBSCRIBE      My notes are ECONOMICS +  и  WEB Developer's Guide | php+js+seo   в Telegram   telegram  

Building a Gui application in conjunction with a CMS engine or how to integrate a reactive JS framework into your site

Building a Gui application in conjunction with a CMS engine or how to integrate a reactive JS framework into your site

VUE – reactive js framework, which is very popular when creating user interfaces and developing single page applications.

Many web developers use the VUE framework to create modern web applications/sites from scratch, due to its simplicity, speed and dynamism in solving many user tasks.

But here's the challenge!

We have site is a project/online store that is implemented on some php engine (CMS), for example on WordPress, OpenCart, ImageCMS, etc.

There is a need to link to it a specific application written in js using Vue 3, with all its component development approaches.

That is, there is no need to deploy the project from scratch, but to transfer all the functionality from php to the js framework, you understand what it costs ..., and why it is necessary.

Of course, you can connect the CDN link of the framework on the page and use its functionality on your site in such a way as a regular library. But this approach makes it impossible to develop large and extensible, due to its component nature, applications on Vue.

The best option in this case is to deploy a tool based on your CMS engine such as Vue CLI, which includes the capabilities of webpack (module package builder) and webpack-dev-server (for server development).

Using an example, let's try to implement this feature by linking the Vue framework version 3 with the ImageCMS CMS engine, which has the CodeIgniter 3 PHP framework under the hood.

Based on the fact that all popular CMS site engines have a similar file structure, the principles and approaches in deploying Vue in your project will be similar. You just need to show some ingenuity, taking into account the synthetic features of your CMS.

So, Let's go!

Step 1 - Install The Node.js:

Node.js is a JavaScript code execution environment based on the V8 engine.

In this example, we will install on Windows (which does not change the essence) - https://nodejs.org/en

'building a Vue application in conjunction with a CMS engine in PHP - 1

Step 2 - Install the Vue CLI:

Vue CLI is a tool for interacting with Vue using the command line of the operating system.

We install using the terminal command line (in this case, the terminal of the VS Code editor), having previously deleted previous versions, if they were installed (npm uninstall vue-cli –g).

npm install -g @vue/cli

'building a Vue application in conjunction with the CMS engine in PHP - 2

We install it globally, as evidenced by the –g flag (for possible use of this utility in all our projects, if necessary).

Our project/website kaktotak.net . But in this case, it does not matter from which position in the terminal (from the root or any other folder) we will enter this command.

After that, we will check the version of the installed utility with the command:

vue --version

'building a Vue application in conjunction with a CMS engine in PHP - 3

Step 3 - Create a project on Vue 3

Before performing this procedure, let's go to the CMS root package. It is more expedient to create a folder for the future Vue project at the top level, naming it, for example, vue.

'building a Vue application in conjunction with a CMS engine in PHP - 4

Go to this folder using our terminal:

'building a Vue application in conjunction with a CMS engine in PHP - 5

And we create a project directly in it, for example, with the default name hello-world, with the command:

vue create hello-world

When installing by default, select the version Vue 3 with default settings.

The project was created in the root folder vue/hello-world.

'building a Vue application in conjunction with a CMS engine in PHP - 6

To make sure of this, in the folder of our project in the terminal, run the command:

npm run serve

'Vue build applications in conjunction with the CMS engine in PHP - 7

It will launch a local development server at http://localhost:8080 , going to which we will see our project.

'Vue build applications in conjunction with the CMS engine in PHP - 8

That is, all the files of the vue project are installed in the specified folder and now you can proceed to its development.

In this form, vue functions only in the dev (development) environment.

Let's compile (assemble) our project and check what happens:

npm run build

'Vue build applications in conjunction with the CMS engine in PHP - 10

When compiling (building webpack), using the package manager npm, the production version files will be placed in the dist folder of our project.

'building a Vue application in conjunction with a CMS engine in PHP - 9

In this form, the pages of the site into which we would like to integrate our vue project will not get access to it. If this can be done, it is manual work, with the need to constantly change the names of js and css files, with each new compilation.

Step 4: Integrate the Vue 3 project into the structure of our website

In our example, you need to access these production files, but from the insert folder of the corporate directory (templates folders) of our CMS engine. The full path is indicated on the skin. The target folder add from the root of the site.

'Vue build applications in conjunction with the CMS engine in PHP - 11

Now we create a site page through the engine admin panel (with which we want to link the vue project), specifying a template for its output, for example - page_ .tpl, which, in turn, through the php include method, we will output our target template service.tpl (IMPORTANT ! - add the div c block to this file id="app", where the Vue application will be mounted).

{include_tpl('insert/calculations_service_payable/572/service.tpl')}

'Vue build applications in conjunction with the CMS engine in PHP - 12

The question now is how to redirect files to this folder when compiling production versions add.

Opening the filevue.config.js (in the folder of our vue project - hello-world) and connect the necessary library path to correctly determine the vue absolute path:

const path = require("path");

And add the following value to the outputDir property of the defineConfig object:

path.resolve(__dirname,"../../templates/corporate/insert/calculations_service_payable/572/add")

'Vue build applications in conjunction with the CMS engine in PHP - 13

Now in the terminal, go to the folder of our project (hello-world) and install the library itself using the command:

npm install path

'Vue build applications in conjunction with the CMS engine in PHP - 14

To check the operation of the Vue project, in the HelloWorld component.vue let's add a result variable with some value to the data() method in the script>/script> block and output it in the template>/template> block.

'Vue build applications in conjunction with the CMS engine in PHP - 15

After saving the changes, let's check the operation of the dev version.

'Vue build applications in conjunction with the CMS engine in PHP - 16

Everything works.

Compiling our Vue project using the command:

npm run build

'Vue build applications in conjunction with the CMS engine in PHP - 17

Thus, all the production version files are already in the add folder of our site.

'Vue build applications in conjunction with the CMS engine in PHP - 17_1

In order for all file names and their path to be registered automatically when downloading our old file, we will add application/libraries/ to the library file (already of the engine (CMS) itselflib_my.php the following method will be used to solve this problem:

'Vue build applications in conjunction with the CMS engine in PHP - 19

In the template of the service.tpl file, we implement the operation of this method with the following construction:

'Vue build applications in conjunction with the CMS engine in PHP - 20

Now let's load the page of the site to which we have connected the Vue project.

'Vue build applications in conjunction with the CMS engine in PHP - 21

As you can see, everything works. And now it only remains to write the Vue application itself.

That's how, with such a simple, uncomplicated way, you can expand the functionality of almost any project/site developed on the PHP CMS engine using the cool Vue 3 js framework.

Building a Vue application in conjunction with a CMS engine or how to integrate a reactive JS framework into your website - Something like that!

автор - Михаленко Р.
M R. Автор - kaktotak.by Specialization: financial and economic design - modeling of business, investment projects of the real sector, analysis and evaluation of efficiency, optimization of the management decision system.

A wide range of web-based competencies for solving business problems.

Subscribe to my telegram channel - My notes are ECONOMICS +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

And also - WEB Developer's Guide | php+js+seo
Notes and native solutions to simple local tasks in PHP, JS. Something about Laravel, WordPress, Vue and SEO.

  Personal assistance in economic design and web development:

  • Financial and economic modeling, analysis, accounting, business planning
  • Comprehensive web development/project support on the web (php/js, seo – Laravel, WordPress, Vue, telegram, administration, content, advertising in Yandex Direct

  telegram или форма обратной связи

Administrator
472
0
Name
E-mail
Rating
Review

Currency Converter
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT- what is it about
ECONOMIC LITERACY
  Simple online solutions to problems of economics and finance  
I Want To Know Everything. Useful Tips