README

这是一个PHP框架，提供使用VueJs作为前端单页面渲染。

安装

php composer create-project opoink/opoink-app-2

如果您在机器上没有安装composer，可以下载composer.phar

wget https://getcomposer.org.cn/composer.phar

然后在您的终端执行以下命令

php composer.phar create-project opoink/opoink-app-2

切换到/App/node目录以运行npm命令

生成组件

php opoink --generate=component --location=Vendor_Module::pages/home --component-name=my-component
php opoink --g=c --location=Vendor_Module::pages/home --cn=my-component
php opoink --g=c --l=Vendor_Module::pages/home --cn=my-component
php opoink --g=c --l=Vendor_Module --cn=cmy-component

我们仍然使用Opoink CLI生成VueJs组件

1. --generate 或 --g：要执行的操作。
2. --location 或 --l：生成组件的位置。
3. --component-name 或 --cn：您的新组件名称，字母、-和_是接受的字符。 - _只是分隔符。

这将在/App/Ext/Vendor/Module/View/vue/components下生成一个新的目录和四个文件。

MyComponent.ts
MyComponent.component.ts
MyComponent.html
MyComponent.scss

这还将在/App/Ext/Vendor/Module下生成vue.components.ts和components.json，如果这两个文件存在，Opoink将更新文件以包含新生成的组件。

组件注入

借助jQuery，Opoink可以将您的组件注入到现有的组件中。无论是同一模块还是另一个现有模块。简单来说，您不需要更改其他模块的组件，您只需告诉Opoink您想在何处注入新组件，然后让Opoink为您完成。

在components.json文件中添加inject_to到组件中

{
    "component_name": "MyComponent",
    "vendor": "Vendorname",
    "module": "Modulename",
    "location": "Vendorname\/Modulename\/vue\/components\/pages\/home\/MyComponent\/MyComponent.component",
    "inject_to": [
        {
            "component_name": "ExistingComponent",
            "element_id": "element-id-from-the-component-template",
            "inject_type": "prepend",
            "wrapper": "div"
        }
    ]
}

1. inject_to：是可选的，意味着Opoink应该将此组件注入到具有给定名称的另一个组件中。
2. component_name：如果声明了inject_to则必需。
3. element_id：如果有值，Opoink将尝试查找此元素，如果找到元素，则将其用作注入的参考，如果没有找到，则组件将注入到组件模板的顶部或底部。
4. inject_type：before、after、append或prepend
   1. before：组件将被注入到元素之前。
   2. after：组件将被注入到元素之后。
   3. append：组件将被注入到组件元素的底部。
   4. prepend：组件将被注入到组件元素的顶部。
5. wrapper：可选的，组件将被包裹在指定的标记中然后注入。

路由器

Vendor/Module目录下的vue.routes.ts

import VRouter from './../../../node/src/core/VueRouter';

const HomeComponent = () => import(/* webpackChunkName: "HomeComponent" */ './View/vue/components/pages/Home/Home.component');
const LoginComponent = () => import(/* webpackChunkName: "LoginComponent" */ './View/vue/components/pages/Login/Login.component');

let routes = [
    { path: '/', component: HomeComponent },
    { path: '/login', component: LoginComponent }
]

routes.forEach(route => {
    VRouter.addRoute(route);
});

引导式模态弹出窗口

https://docs.google.com/document/d/1Q29Xd-Nt59NIcWGmHAyodMOBWuinn46VMfmR5S4Okxw/edit?usp=sharing