Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

Einfaches Plugin-Loading 

Lädt alle Plugins aus dem Ordner src/plugins.
Bis jetzt werden nur die Routes hinzugefügt!
Es wird noch nicht mit dem Store gearbeitet.
This commit is contained in:
Tim Gröger 2020-10-12 23:49:05 +02:00
parent 2ee3cb0dbc
commit 6d56d5847f
20 changed files with 3113 additions and 2749 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5492
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -19,13 +19,16 @@
"devDependencies": {
"@quasar/app": "^2.0.0",
"@types/node": "^10.17.15",
"@types/webpack": "^4.41.22",
"@types/webpack-env": "^1.15.3",
"@typescript-eslint/eslint-plugin": "^3.3.0",
"@typescript-eslint/parser": "^3.3.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-vue": "^6.1.2"
"eslint-plugin-vue": "^6.1.2",
"require-context": "^1.1.0"
},
"browserslist": [
"last 10 Chrome versions",

35
quasar.conf.js
View File

@ -8,8 +8,9 @@
/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */
const { configure } = require('quasar/wrappers');
const { path } = require('path');
module.exports = configure(function (ctx) {
module.exports = configure(function(ctx) {
return {
// https://quasar.dev/quasar-cli/supporting-ts
supportTS: {
@ -24,15 +25,10 @@ module.exports = configure(function (ctx) {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
boot: [
'composition-api',
'axios',
],
boot: ['composition-api', 'axios', 'plugins'],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'app.scss'
],
css: ['app.scss'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
@ -45,7 +41,7 @@ module.exports = configure(function (ctx) {
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
'material-icons' // optional, you are not bound to it
],
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@ -69,7 +65,7 @@ module.exports = configure(function (ctx) {
// extractCSS: false,
// https://quasar.dev/quasar-cli/handling-webpack
extendWebpack (cfg) {
extendWebpack(cfg) {
// linting is slow in TS projects, we execute it only for production builds
if (ctx.prod) {
cfg.module.rules.push({
@ -77,22 +73,27 @@ module.exports = configure(function (ctx) {
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
})
});
}
},
cfg.resolve.alias = {
...cfg.resolve.alias
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
//flaschngeist_plugin: path.resolve(__dirname, './src/plugins')
};
}
},
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
https: false,
port: 8080,
open: true // opens browser window automatically
open: false // opens browser window automatically
},
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: {
iconSet: 'material-icons', // Quasar icon set
lang: 'en-us', // Quasar language pack
lang: 'de', // Quasar language pack
config: {},
// Possible values for "importStrategy":
@ -178,13 +179,11 @@ module.exports = configure(function (ctx) {
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
@ -198,10 +197,10 @@ module.exports = configure(function (ctx) {
// More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
nodeIntegration: true,
extendWebpack (/* cfg */) {
extendWebpack(/* cfg */) {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
}
}
}
};
});

44
src/boot/plugins.ts Normal file
View File

@ -0,0 +1,44 @@
import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { Module } from 'vuex';
import {} from 'webpack';
interface PluginRouteConfig extends RouteConfig {
example?: unknown;
}
interface EssentialLink {
title: string;
link: string;
icon?: string;
}
interface Plugin {
router: PluginRouteConfig[];
store?: Module<any, any>;
mainLink: EssentialLink;
}
export { PluginRouteConfig, Plugin };
// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export default boot(({ Vue, router, store }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const plugins: any = require.context('src/plugins', true, /.+\/plugin.ts$/);
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
let mop = [];
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
plugins.keys().forEach((fileName: any) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
router.addRoutes(plugins(fileName).default.router);
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
mop.push(plugins(fileName).default.mainLink);
});
Vue.prototype.$flaschengeist_plugins = mop;
console.log(plugins);
});

7
src/layouts/MainLayout.vue
View File

@ -53,6 +53,13 @@
:link="link.link"
:icon="link.icon"
/>
<essential-link
v-for="(link, index) in $flaschengeist_plugins"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</q-list>
<q-separator />

8
src/pages/home/Home.vue
View File

@ -4,6 +4,9 @@
<q-card-section>
Home
</q-card-section>
<q-card-section>
{{ a }}
</q-card-section>
</q-card>
<router-view />
</q-page>
@ -11,8 +14,11 @@
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import {} from '';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeist_plugins;
return { a };
}
});
</script>

32
src/plugins/plugin-example-2/components/navigation/PluginLinks.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{
title: 'Neues Plugin2',
link: 'plugin2_1',
icon: 'mdi-information-outline'
},
{ title: 'Altes Plugin2', link: 'plugin2_2', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

17
src/plugins/plugin-example-2/pages/NewPlugin.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Neues {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

16
src/plugins/plugin-example-2/pages/OldPlugin.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Altes {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

22
src/plugins/plugin-example-2/pages/Plugin.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == mainLink.link">
<q-card-section>
{{ mainLink.title }}
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeist_plugins;
return { a, mainLink };
}
});
</script>

12
src/plugins/plugin-example-2/plugin.ts Normal file
View File

@ -0,0 +1,12 @@
import { PluginRouteConfig, Plugin } from 'boot/plugins';
import { RouteConfig } from 'vue-router';
import routes from 'src/plugins/plugin-example-2/routes';
const plugin: Plugin = {
router: routes,
mainLink: { title: 'Plugin2', link: 'plugin2', icon: 'mdi-toy-brick-plus' }
};
const mainLink = plugin.mainLink;
export { mainLink };
export default plugin;

34
src/plugins/plugin-example-2/routes/index.ts Normal file
View File

@ -0,0 +1,34 @@
import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/main',
components: {
default: () => import('layouts/MainLayout.vue')
},
children: [
{
path: 'plugin2',
name: 'plugin2',
components: {
default: () => import('../pages/Plugin.vue'),
'plugin-nav': () => import('../components/navigation/PluginLinks.vue')
},
children: [
{
path: 'plugin2_1',
name: 'plugin2_1',
component: () => import('../pages/NewPlugin.vue')
},
{
path: 'plugin2_2',
name: 'plugin2_2',
component: () => import('../pages/OldPlugin.vue')
}
]
}
]
}
];
export default routes;

32
src/plugins/plugin-example/components/navigation/PluginLinks.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{
title: 'Neues Plugin1',
link: 'plugin1_1',
icon: 'mdi-information-outline'
},
{ title: 'Altes Plugin1', link: 'plugin1_2', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

17
src/plugins/plugin-example/pages/NewPlugin.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Neues {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

16
src/plugins/plugin-example/pages/OldPlugin.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Altes {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

22
src/plugins/plugin-example/pages/Plugin.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == mainLink.link">
<q-card-section>
{{ mainLink.title }}
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeist_plugins;
return { a, mainLink };
}
});
</script>

14
src/plugins/plugin-example/plugin.ts Normal file
View File

@ -0,0 +1,14 @@
import { PluginRouteConfig, Plugin } from 'boot/plugins';
import { RouteConfig } from 'vue-router';
import routes from 'src/plugins/plugin-example/routes';
const plugin: Plugin = {
router: routes,
mainLink: { title: 'Plugin1', link: 'plugin1', icon: 'mdi-toy-brick' }
};
const mainLink = plugin.mainLink;
export { mainLink };
export default plugin;

34
src/plugins/plugin-example/routes/index.ts Normal file
View File

@ -0,0 +1,34 @@
import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/main',
components: {
default: () => import('layouts/MainLayout.vue')
},
children: [
{
path: 'plugin1',
name: 'plugin1',
components: {
default: () => import('../pages/Plugin.vue'),
'plugin-nav': () => import('../components/navigation/PluginLinks.vue')
},
children: [
{
path: 'plugin1_1',
name: 'plugin1_1',
component: () => import('../pages/NewPlugin.vue')
},
{
path: 'plugin1_2',
name: 'plugin1_2',
component: () => import('../pages/OldPlugin.vue')
}
]
}
]
}
];
export default routes;

2
src/store/index.ts
View File

@ -16,7 +16,7 @@ export interface StateInterface {
example: unknown;
}
export default store(function ({ Vue }) {
export default store(function({ Vue }) {
Vue.use(Vuex);
const Store = new Vuex.Store<StateInterface>({

1
tsconfig.json
View File

@ -1,6 +1,7 @@
{
"extends": "@quasar/app/tsconfig-preset",
"compilerOptions": {
"types": ["node", "webpack-env"],
"baseUrl": "."
}
}