# 基石引擎

**Repository Path**: DevSpeed/cornerstone

## Basic Information

- **Project Name**: 基石引擎
- **Description**: 低代码平台架构
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-19
- **Last Updated**: 2025-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Corner Stone 基石引擎

一种对开发友好的, 插件化前端框架, 支持自由灵活的配置项目插件功能

特点 :

- 使用最新技术栈进行技术支持
- 异步加载插件
- 插件与基础库独立打包
- 分体运行插件

## 待完成

### 架构级别开发

- 独立预览组件库
- 库根据插件进行加载

### 功能级别开发

- 流式布局可视化编辑
- 定位布局可视化编辑
- CSS 在线编辑
- JS 在线编辑
- 页面事件总线
- 在线编辑组件模块
- 对主流 vue3 UI库进行支持
- vue 文件导出

### 内容级别开发

- 数据大屏模块
- 流程图模块
- 数据表格模块
- 表单模块
- 自定义页面模块

## 安装

### 第一步 安装依赖

```pnpm i```

### 第二步 测试运行

```npm run dev```

### 第三步 打包

```npm run build```

![alt text](/bin/image.png)

### 创建插件

创建一个文件夹，包含 index.js 与 plugin.config.js 两个文件

```js
// index.js
export default {
    install: async function (app) {

        // 注册路由
        app.AddRouter([
            { path: '/', name: 'HomePage', component: () => import('./View/Portal.vue') },
            // { path: '/Portal/View', component: () => import('./View/View.vue') },
        ]);
   
        // 添加路由监听事件
        app.Router.beforeEach((to, form, next) => {
            if (!User.token && to.path !== '/login') {
                next({
                    path: '/login',
                    query: { redirect: to.fullPath }
                })
            } else {
                next();
            }
        })

        // 注册组件
        app.RegistPluginCompontent('User.Logout', () => import('./View/User.vue'))
        // 注册插件对应方法
        app.RegistPluginEvent('User.Token', () => {
            return User.token
        });
    }
}
```

```js
// plugin.config.js
export default {
    title: '通用 皮肤插件',
    pluginName: 'Theme',
    version: '1.0.0',
}
```

### vue中使用插件

![alt text](/bin/image2.png)

### js 中使用插件的方法

![alt text](/bin/image3.png)

### 本地测试引用插件

```ini
# .env.development

VITE_PLUGIN=`[
  "../plugin/Theme/index.js",
  "../plugin/User/index.js",
  "../plugin/Portal/index.js",
  "../plugin/App/index.js",
  "../plugin/VisualEditor-Core/index.js",
  "../plugin/App-Custom/index.js",
]`
VITE_USERNAME=admin
VITE_PASSWORD=111111
```

### 打包引用插件（测试版）

> 此处请自行改为实际业务逻辑来获取组件列表

/public/Server.txt

```json
[
    "../plugin/Theme-v1.0.0/index.es.js",
    "../plugin/User-v1.0.0/index.es.js",
    "../plugin/Portal-v1.0.0/index.es.js",
    "../plugin/App-v1.0.0/index.es.js",
    "../plugin/VisualEditor-Core-v1.0.0/index.es.js",
    "../plugin/App-Custom-v1.0.0/index.es.js",
]

```