How to install Vue plugins in Bitrix?

Question

1C-Bitrix

I'm not a real front-end developer, so instructions like "run npm i package name" confuse me in general. Where is it generally done?

Those. it is clear that this should be done in the "project directory". But what is a "project directory" in real terms?

And even more so, I'm at a dead end as to how to do this in relation to bitrix. Those. I can make my own plugins, assemble them using the bitrix cli and connect them as extensions in terms of bitrix, but how can I do this with a third-party plugin?

Answer 1

Ahead of the answer, quit this thankless task)
youtube , better watch after reading the answer
I think the first two points are obvious, but I’ll write
1. Install node.js
Through the console
2. Install bitrix cli
npm install -g @bitrix/cli
Further, judging by the logic of the person from vidos if you don’t have a SPA, and you probably don’t have a SPA:
3. Create an extension for the vue (or other) plugin, in the console go to the folder /local/js/module_name/
bitrix create
answer the questions, the name of your extension should be without dots
4. Go to the folder with the extension, write
npm init
5. Download the desired plugin
npm i package name
check that it was added to package.json
6. Open bundle.config.js in the editor and add

plugins: {
  resolve: true,
},

7. Open the file in the src folder, which was created via bitirx create, erase everything in it and write import plugin, as an example

import React from 'react'

export {React}

8. In the console (check that you are in the folder with your extension, and not somewhere in the root, otherwise the kernel will be bundled and it will be bad)
bitrix build
9. You look at the bundle in the dist folder, if everything is ok, there should be a transpiled code of your plugin
Now you can use the Bitrix API

\Bitrix\Main\UI\Extension::load("имя_модуля.имя_экстеншена")

import React from 'имя_модуля.имя_экстеншена';

loadExtension('имя_модуля.имя_экстеншена').then(() => {
    // Код который использует `main.loader`
});

PS
I myself tried to install react, but it uses node.js environment variables in its files, and so on. they are not defined js crashes, I didn’t understand how to be with this and therefore scored, maybe it will be with other plugins.
And again, judging by the words of the person from the video, this should be done for each plugin so that the code is not duplicated in your other bundles

Answer 2

And where does Bitrix in general? It's just a backend that is no different from other backends. At least in Bitrix, at least where everything is installed, regardless of this.
The project directory is the directory in which the package.json file is located, in which the installation rules (what to install)
are written. If anything, I also never have a frontend.