cli icon indicating copy to clipboard operation
cli copied to clipboard

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

Open Voral opened this issue 1 year ago • 8 comments

Очень нужны документация и пример. Перечитал перепроверил два закрытых тикета. Прочитав их добился что вроде как начинает компилироваться, но выдает 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 avatar May 18 '23 20:05 Voral