Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Однофайловые компоненты vue3 #61

Open
Voral opened this issue May 18, 2023 · 8 comments
Open

Однофайловые компоненты vue3 #61

Voral opened this issue May 18, 2023 · 8 comments

Comments

@Voral
Copy link

Voral commented May 18, 2023

Очень нужны документация и пример. Перечитал перепроверил два закрытых тикета. Прочитав их добился что вроде как начинает компилироваться, но выдает
Error: Cannot read properties of undefined (reading 'type')

Переустановил, как сказано, в закрытом тикете bitrix/cli теперь вернулась
Error: Unexpected character '#' (5:4) in ..../local/js/test/test/src/test.js

Код следующий
bundle.config.js

const isProd = process.argv.includes('--prod');
const vuePlugin = require('rollup-plugin-vue');
const commonjs = require('rollup-plugin-commonjs');

module.exports = {
    input: 'src/test.js',
    output: 'dist/test.bundle.js',
    namespace: 'BX.Test',
    browserslist: true,
    minification: isProd,
    sourceMaps: !isProd,
    plugins: {
        custom: [
            vuePlugin(),
            commonjs(),
        ],
    },
};

test.js

import {BitrixVue} from 'ui.vue3';
import Hello from "Hello.vue";

export class Test {
    #application;
    #rootNode;

    constructor(rootNode): void {
        this.#rootNode = document.querySelector(rootNode);
    }

    start(): void {
        this.#application = BitrixVue.createApp({
            name: 'Example',
            components:{
                Hello
            },
            template: '<div>Test: <Hello/></div>'
        })
        this.#application.mount(this.#rootNode);
    }
}

Hello.vue

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Привет всем!"
    }
  }
}
</script>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Info @bitrix/cli, v3.1.1

@Voral
Copy link
Author

Voral commented May 18, 2023

package.json

{
  "dependencies": {
    "rollup-plugin-commonjs": "^9.0.0",
    "rollup-plugin-vue": "^5.0.0"
  }
}

@Voral
Copy link
Author

Voral commented May 18, 2023

Info @bitrix/cli, v3.2.2, так же

   Build error: Unexpected character '#' (5:4) in .../local/js/test/test/src/test.js
   .../local/js/test/test/src/test.js:5:4

@druxik
Copy link

druxik commented Oct 10, 2023

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?
когда делаю import App from "./components/App.vue"; в bunle закидывается не та переменная
image
Посмотрел в исходник, что пытается подключить cli
[ 'ui.vue3', 'vue' ]
'vue' появляется, когда делаю import App from "./components/App.vue";

@Voral
Copy link
Author

Voral commented Oct 11, 2023

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Долго пытался найти решение и в поддержку обращался (ответили что не поддерживается). В итоге либо без однофайловых либо использую vite (т.е без bitrix/cli)

@druxik
Copy link

druxik commented Oct 12, 2023

image
да, тоже получил ответ от поддержки, печально(

@svn72
Copy link

svn72 commented Nov 15, 2023

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Пропатчи себе bitrix/cli изменениями из #59 и будет тебе счастье, там дел на пару строк кода

@druxik
Copy link

druxik commented Dec 1, 2023

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Пропатчи себе bitrix/cli изменениями из #59 и будет тебе счастье, там дел на пару строк кода

Как это правильно делается, никогда этого не делал)
Допустим я установил cli через npm и он находится по пути
C:\Users\Roma\AppData\Roaming\npm\node_modules@bitrix\cli
Туда иду и делаю следующее
git init
git commit ....
curl https://patch-diff.githubusercontent.com/raw/bitrix-tools/cli/pull/59.patch | git am
Получаю Patch is empty.
Как это правильно делается? Желательно, чтобы это легко повторили другие разработчики из команды)

@svn72
Copy link

svn72 commented Dec 16, 2023

@druxik

Получаю Patch is empty.

Судя по документации git am требует именно файл, потому и ошибка.
У меня срабатывает следующий порядок действий (нода - v20.10)

Туда иду и делаю следующее

git init
git commit ...
wget https://patch-diff.githubusercontent.com/raw/bitrix-tools/cli/pull/59.patch
git apply 59.patch
npm run build

Абсолютно стабильным этот алгоритм не назвать, т.к. версия в npm часто выше чем тут в репозитории.
Так, что будем ждать.
Возможно ПР когда-то вольется, или мейнтейнеры что-нибудь доработают по своему, и можно будет писать vue компоненты как написано в доке по vue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants