@pluginarch/create-parch/templates/app/src/pages/User.mjs

this is way to create a ui project

// const HTMLElement = globalThis.HTMLElement || class {};
// const customElements = globalThis.customElements || class {
//   static define=(a,b)=>{}
// };
class User extends BaseElement {
  constructor() {
    super(); // 调用父类构造函数
    debugger;
    // 创建Shadow DOM 
    // 创建组件的模板
    // const template = document.createElement('template');
    const template = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 2px;
          font-family: 'Arial', sans-serif;
          color: #333;
        }
      </style>
      <slot>
        <span>aaa</span>

      <div>用户信息：</div>
      </slot> <!-- 这里可以插入内容 -->
    `;
    console.log("test_User");
    // 将模板内容添加到Shadow DOM
    this.parseTemplate(template,()=>{
        console.log('onload')
      });
	  this.$eventbus.$on('usrInfo',msg=>{
      this.shadow.querySelector('span').innerHTML = msg
		  console.log('得到用户信息：'+msg);
	  })
  }
  
}
 
// 定义该组件的标签名
customElements.define('pe-user', User);