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" %}
|
||||
{% 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">
|
||||
|
@ -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/
|
||||
|
||||
|
@ -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
|
||||
|
@ -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 |
@ -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
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