Hello About Blog Projects Bookmarks Ideas

2021-11-20

最近想到这样的一种开发方式（当然是未试验的）：插件式开发。

插件式应用在很多地方，最常见的就是 Bundler，如 Vite，webpack 等，Node 中间件貌似也是这个道理。

但我想到的是应用在 UI 层。

文件目录以及模板设想

假设这种开发方式的目录是这个样子

src/
-- plugins/
-- App.vue
-- main.js
index.html

在模板文件 App.vue 中预设好所需要的锚点

<template>
	<App:header />
	<App:body />
	<App:footer />
</template>

大多数时候 App.vue 就是一个展现路由视图的地方，并无过多其他用处，所以通过插件将 <RouterView /> 挂载到 <App:body /> 即可

// plugins/registerRouterView.js
import { RouterView } from 'vue-router'
export function apply(api) {
	api.registerPosition('App:body', RouterView, {/* ... */})
}

注册一个 Home 路由

// plugins/HomePage.js
import Home from '../components/Home.vue'
export function apply(api) {
	api.registerRoute('/', Home, {/* ... */})
}