not really getting the feel for this, will continue later, need to really learn how this works
This commit is contained in:
vabene1111 2021-01-09 23:27:25 +01:00
parent 6acf4bb831
commit b93b16d6eb
13 changed files with 3764 additions and 58 deletions

View File

@ -1,12 +0,0 @@
let toast_mixin = Vue.mixin({
methods: {
makeToast: function (title, message, variant = null) {
this.$bvToast.toast(message, {
title: title,
variant: variant,
toaster: 'b-toaster-top-center',
solid: true
})
}
}
})

View File

@ -0,0 +1 @@
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,91 @@
(function (e) {
function r(r) {
for (var n, c, l = r[0], a = r[1], p = r[2], f = 0, s = []; f < l.length; f++) c = l[f], Object.prototype.hasOwnProperty.call(o, c) && o[c] && s.push(o[c][0]), o[c] = 0;
for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
i && i(r);
while (s.length) s.shift()();
return u.push.apply(u, p || []), t()
}
function t() {
for (var e, r = 0; r < u.length; r++) {
for (var t = u[r], n = !0, l = 1; l < t.length; l++) {
var a = t[l];
0 !== o[a] && (n = !1)
}
n && (u.splice(r--, 1), e = c(c.s = t[0]))
}
return e
}
var n = {}, o = {vue_app_01: 0}, u = [];
function c(r) {
if (n[r]) return n[r].exports;
var t = n[r] = {i: r, l: !1, exports: {}};
return e[r].call(t.exports, t, t.exports, c), t.l = !0, t.exports
}
c.m = e, c.c = n, c.d = function (e, r, t) {
c.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
}, c.r = function (e) {
"undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
}, c.t = function (e, r) {
if (1 & r && (e = c(e)), 8 & r) return e;
if (4 & r && "object" === typeof e && e && e.__esModule) return e;
var t = Object.create(null);
if (c.r(t), Object.defineProperty(t, "default", {
enumerable: !0,
value: e
}), 2 & r && "string" != typeof e) for (var n in e) c.d(t, n, function (r) {
return e[r]
}.bind(null, n));
return t
}, c.n = function (e) {
var r = e && e.__esModule ? function () {
return e["default"]
} : function () {
return e
};
return c.d(r, "a", r), r
}, c.o = function (e, r) {
return Object.prototype.hasOwnProperty.call(e, r)
}, c.p = "";
var l = window["webpackJsonp"] = window["webpackJsonp"] || [], a = l.push.bind(l);
l.push = r, l = l.slice();
for (var p = 0; p < l.length; p++) r(l[p]);
var i = a;
u.push([0, "chunk-vendors"]), t()
})({
0: function (e, r, t) {
e.exports = t("56d7")
}, "234a": function (e, r, t) {
}, "56d7": function (e, r, t) {
"use strict";
t.r(r);
t("e260"), t("e6cf"), t("cca6"), t("a79d");
var n = t("7a23");
function o(e, r, t, o, u, c) {
var l = Object(n["e"])("HelloWorld");
return Object(n["d"])(), Object(n["b"])(l, {msg: "Welcome to Your Vue.js App"})
}
var u = {class: "hello"};
function c(e, r, t, o, c, l) {
return Object(n["d"])(), Object(n["b"])("div", u, [Object(n["c"])("h1", null, Object(n["f"])(t.msg), 1)])
}
var l = {name: "HelloWorld", props: {msg: String}};
l.render = c;
var a = l, p = {name: "App", components: {HelloWorld: a}};
t("e825");
p.render = o;
var i = p;
Object(n["a"])(i).mount("#app")
}, e825: function (e, r, t) {
"use strict";
t("234a")
}
});

View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}
{% block title %}{% trans 'Meal-Plan' %}{% endblock %}
{% block extra_head %}
@ -20,7 +20,12 @@
{% block content %}
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'vue_app_01' %}
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div class="row">
<div class="col-md-4 offset-md-4">
<div class="input-group" style="margin-top: 8px; margin-bottom: 8px">

View File

@ -73,6 +73,7 @@ INSTALLED_APPS = [
'rest_framework',
'rest_framework.authtoken',
'django_cleanup.apps.CleanupConfig',
'webpack_loader',
'cookbook.apps.CookbookConfig',
]
@ -159,6 +160,20 @@ AUTH_PASSWORD_VALIDATORS = [
},
]
# Vue webpack settings
VUE_DIR = os.path.join(BASE_DIR, 'vue')
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'vue/', # must end with slash
'STATS_FILE': os.path.join(VUE_DIR, 'webpack-stats.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
}
}
# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

View File

@ -28,3 +28,4 @@ beautifulsoup4==4.9.3
microdata==0.7.1
django-random-queryset==0.1.3
Jinja2==2.11.2
django-webpack-loader==0.7.0

View File

@ -1,5 +1,4 @@
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -1,32 +1,7 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
@ -38,21 +13,3 @@ export default {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

56
vue/vue.config.js Normal file
View File

@ -0,0 +1,56 @@
const BundleTracker = require("webpack-bundle-tracker");
const pages = {
'vue_app_01': {
entry: './src/main.js',
chunks: ['chunk-vendors']
},
}
module.exports = {
pages: pages,
filenameHashing: false,
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production'
? ''
: 'http://localhost:8080/',
outputDir: '../cookbook/static/vue/',
chainWebpack: config => {
config.optimization
.splitChunks({
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "chunk-vendors",
chunks: "all",
priority: 1
},
},
});
Object.keys(pages).forEach(page => {
config.plugins.delete(`html-${page}`);
config.plugins.delete(`preload-${page}`);
config.plugins.delete(`prefetch-${page}`);
})
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: '../vue/webpack-stats.json'}]);
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://localhost:8080')
.host('localhost')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({"Access-Control-Allow-Origin": ["*"]})
}
};

1
vue/webpack-stats.json Normal file
View File

@ -0,0 +1 @@
{"status":"done","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"vue_app_01":[{"name":"css/vue_app_01.css","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\css\\vue_app_01.css"},{"name":"js/vue_app_01.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\vue_app_01.js"}]}}