save WIP
not really getting the feel for this, will continue later, need to really learn how this works
This commit is contained in:
parent
6acf4bb831
commit
b93b16d6eb
@ -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
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
1
cookbook/static/vue/css/vue_app_01.css
Normal file
1
cookbook/static/vue/css/vue_app_01.css
Normal 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}
|
BIN
cookbook/static/vue/favicon.ico
Normal file
BIN
cookbook/static/vue/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
3592
cookbook/static/vue/js/chunk-vendors.js
Normal file
3592
cookbook/static/vue/js/chunk-vendors.js
Normal file
File diff suppressed because it is too large
Load Diff
91
cookbook/static/vue/js/vue_app_01.js
Normal file
91
cookbook/static/vue/js/vue_app_01.js
Normal 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")
|
||||||
|
}
|
||||||
|
});
|
@ -1,7 +1,7 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
{% load render_bundle from webpack_loader %}
|
||||||
{% block title %}{% trans 'Meal-Plan' %}{% endblock %}
|
{% block title %}{% trans 'Meal-Plan' %}{% endblock %}
|
||||||
|
|
||||||
{% block extra_head %}
|
{% block extra_head %}
|
||||||
@ -20,7 +20,12 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
|
{% render_bundle 'chunk-vendors' %}
|
||||||
|
{% render_bundle 'vue_app_01' %}
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4 offset-md-4">
|
<div class="col-md-4 offset-md-4">
|
||||||
<div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
|
<div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
|
||||||
|
@ -73,6 +73,7 @@ INSTALLED_APPS = [
|
|||||||
'rest_framework',
|
'rest_framework',
|
||||||
'rest_framework.authtoken',
|
'rest_framework.authtoken',
|
||||||
'django_cleanup.apps.CleanupConfig',
|
'django_cleanup.apps.CleanupConfig',
|
||||||
|
'webpack_loader',
|
||||||
'cookbook.apps.CookbookConfig',
|
'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
|
# Internationalization
|
||||||
# https://docs.djangoproject.com/en/2.0/topics/i18n/
|
# https://docs.djangoproject.com/en/2.0/topics/i18n/
|
||||||
|
|
||||||
|
@ -28,3 +28,4 @@ beautifulsoup4==4.9.3
|
|||||||
microdata==0.7.1
|
microdata==0.7.1
|
||||||
django-random-queryset==0.1.3
|
django-random-queryset==0.1.3
|
||||||
Jinja2==2.11.2
|
Jinja2==2.11.2
|
||||||
|
django-webpack-loader==0.7.0
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB |
@ -1,32 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hello">
|
<div class="hello">
|
||||||
<h1>{{ msg }}</h1>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -38,21 +13,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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
56
vue/vue.config.js
Normal 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
1
vue/webpack-stats.json
Normal 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"}]}}
|
Loading…
Reference in New Issue
Block a user