Permalink
Browse files

assets class, first vue comp test

  • Loading branch information...
aaroniker committed Feb 3, 2018
1 parent cf80da1 commit 6bbd424f5979ac476b23accabc06f0dd39292113
@@ -1,3 +1,5 @@
{
"presets": ["env", { "modules": false }]
"presets": [
["env", { "modules": false }]
]
}
@@ -8,3 +8,4 @@ node_modules
.DS_Store
package-lock.json
composer.lock
**/scripts/dist/**/*.js
@@ -3,7 +3,8 @@
"private": true,
"dependencies": {
"vue": "~2.5.13",
"vue-resource": "0.7.4",
"lodash": "~4.17.4",
"axios": "~0.17.1"
"jquery": "~3.3.1"
}
}
@@ -15,6 +15,7 @@ public function __construct($config) {
$this->hook = new hook();
$this->route = new route($this);
$this->assets = new assets($this);
$this->view = new viewManager($this);
$this->controller = new controller($this);
$this->modules = new moduleManager($this);
@@ -0,0 +1,60 @@
<?php
class assets {
protected $app;
protected $css = [];
protected $js = [];
protected $base = '';
public function __construct($app) {
$this->app = $app;
$this->base = $this->app->config->get('system')['url'];
}
public function addCSS($file) {
$this->css[] = [
'file' => $this->base.$file
];
}
public function addJS($file, $position = 'normal') {
$this->js[$position][] = [
'file' => $this->base.$file
];
}
public function getCSS() {
$return = '';
foreach($this->css as $css) {
$return .= '<link rel="stylesheet" href="'.$css['file'].'">'.PHP_EOL;
}
return $return;
}
public function getJS($position = 'normal') {
$return = '';
if(isset($this->js[$position])) {
foreach($this->js[$position] as $js) {
$return .= '<script src="'.$js['file'].'"></script>'.PHP_EOL;
}
}
return $return;
}
}
?>
@@ -0,0 +1,23 @@
<template>
<div class="test" @click="check">
{{ test }}
</div>
</template>

<script>
module.exports = {
data() {
return {
test: 'Check me'
}
},
methods: {
check() {
this.test = 'Test';
}
}
}
Vue.component('test-comp', function(resolve) {
resolve(module.exports);
});
</script>
@@ -1 +1,5 @@
<?php $app->assets->addJS('/gear/system/modules/dashboard/scripts/dist/test.js', 'vue'); ?>

dashboard <a href="<?= $route->getLink('login', ['logout']); ?>">Logout</a>

<test-comp></test-comp>
@@ -0,0 +1,15 @@
module.exports = [
{
entry: {
"test": "./scripts/test.vue"
},
output: {
filename: "./scripts/dist/[name].js"
},
module: {
loaders: [
{ test: /\.vue$/, loader: "vue-loader" }
]
}
}
];
@@ -4,6 +4,13 @@
'name' => 'system/theme',
'run' => function($app) {
$app->assets->addJS('/gear/assets/vue/dist/vue.js');
$app->assets->addJS('/gear/system/scripts/dist/system.js', 'afterVue');
},
'filter' => [
'application.show' => function($content) {
$view = new view($this->path.'/views/template.php', [
@@ -8,10 +8,22 @@

<title><?= $app->view->global('title'); ?></title>

<script>
var $gear = <?= json_encode((array)$app->config->get('system')); ?>;
</script>

<?= $app->assets->getCSS(); ?>

</head>
<body>

<?= $app->view->get('content') ?>
<div id="gear">
<?= $app->view->get('content') ?>
</div>

<?= $app->assets->getJS(); ?>
<?= $app->assets->getJS('vue'); ?>
<?= $app->assets->getJS('afterVue'); ?>

</body>
</html>
@@ -0,0 +1,20 @@
function install(Vue) {

var config = window.$gear;

Vue.config.debug = false;

require('vue-resource');

Vue.http.options.root = config.url;
Vue.http.options.emulateHTTP = true;

new Vue({
el: '#gear'
});

}

if(window.Vue) {
Vue.use(install);
}
@@ -0,0 +1,22 @@
var assets = __dirname + "/../assets";

module.exports = [
{
entry: {
"system": "./scripts/system"
},
output: {
filename: "./scripts/dist/[name].js"
},
resolve: {
alias: {
"vue-resource$": assets + "/vue-resource/dist/vue-resource.common.js",
}
},
module: {
loaders: [
{ test: /\.vue$/, loader: "vue-loader" }
]
}
}
];
@@ -2,15 +2,15 @@
"name": "gear-cms",
"private": true,
"scripts": {
"install": "bower install && webpack && gulp"
"install": "bower install && webpack --progress --hide-modules && gulp",
"build": "webpack --progress --hide-modules"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-runtime": "^6.26.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
"bower": "^1.7.6",
"cross-env": "^3.0.0",
"glob": "^7.1.2",
"gulp": "^3.9.0",
"gulp-plumber": "^1.0.1",
@@ -1,9 +1,10 @@
var _ = require('lodash');
var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var exports = [];

glob.sync('{gear/modules/**,gear/installer/**,gear/backend/**,extensions/**,themes/**}/webpack.config.js', {
glob.sync('{gear/modules/**,gear/installer/**,gear/system/**,extensions/**,themes/**}/webpack.config.js', {
ignore: '**/node_modules/*'
}).forEach(function(file) {
var dir = path.join(__dirname, path.dirname(file));
@@ -12,14 +13,25 @@ glob.sync('{gear/modules/**,gear/installer/**,gear/backend/**,extensions/**,them
context: dir,
output: {
path: dir
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
}, config);
}));
});

if(!exports.length) {
console.log('No modules with a "webpack.config.js" found.');
process.exit(1);
}

module.exports = exports;

0 comments on commit 6bbd424

Please sign in to comment.