# x.web

**Repository Path**: wmlgl/x.web

## Basic Information

- **Project Name**: x.web
- **Description**: 插件实现一个工具集web页面
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-22
- **Last Updated**: 2022-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 懒人项目、不定期更新

# 项目说明
本程序意在以插件模式创建一个可以集合各种工具的Web前端程序，本程序不对接后端，以浏览器本地存储为基础开发应用
- x.web: 基础项目整合所有插件并展示运行
- x.host: 插件基础库
- x.common: 封装 vue 及 UI 插件
- x.home: 用 vue 实现的插件，作为主页
- x.help: 用 vue 实现的插件，帮助文档

# 开发说明
- 启动主项目 x.web: npm run dev
- 启动要开发的插件项目， 如 x.home: ```cd plugins/x.home/ && npm run build```
- 浏览器打开 localhost:3000

# 新增插件说明 
<div style="font-size:small;padding:10px">
    1.复制 x-help 项目到同一目录并重名 <br/>
    2.修改新项目的 package.json 的 name 与目录同名 <br/>
    3.修改新项目的 src/x.help.ts 与目录同名 <br/>
    4.编译新项目 <br/>
    5.在 public/plugins.json 中仿照 x.help 添加新的插件加载路径 <br/>
</div>

# 插件生命周期 
<div style="font-size:small;padding:10px">
    1. new: 定义完插件后需要先实例化自己，如 x.help.ts 中的 new XHelp() <br/>
    2. plugin-add: 插件的父类 XPlugin 会将自己注册到全局变量 x.registry ( XPluginRegistry ) 中, x.registry 会触发自身的 plugin-add 事件 <br/>
    3. onInstall: XPluginHost 在监听到 x.registry 的 plugin-add 后, 会调用插件的 setHost 将自己设置给插件，并调用插件的 onInstall <br/>
    4. plugin-add: XPluginHost 在添加插件后会触发自身的 plugin-add 事件 <br/>
    5. host-init: XPluginHost 获得dom元素后会触发 host-init 事件 <br/>
    6. onHostInit: 插件在收到 host-init 事件后会调用自身的 onHostInit <br/>
    7. plugin-remove: XPluginHost 在移除插件后会触发自身的 plugin-remove 事件 <br/>
    8. onUninstall: XPluginHost 移除插件后会调用插件的 onUninstall <br/>
</div>

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.