Пытаюсь настроить vue в django. Прошерстил все что только возможно но нормального полноценного гайда не нашел. Пытаюсь по крупицам запустить
package.json
{
"name": "vuewebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack main.js build.js"
},
"author": "yaroslav baev",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.0",
"vue": "^2.2.6",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.4.1",
"webpack-bundle-tracker": "^0.2.0"
}
}
main.js
// var Vue = require('vue')
// var hello = require('vue!../components/hello.vue')
import Vue from 'vue'
import hello from './components/hello.vue'
Vue.config.devtools = false;
Vue.config.delimiters = ['[[', ']]'];
new Vue({
el: 'body',
components: {
hello: { hello }
}
});
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/.vue$/, loader:'vue-loader'},
{test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}
]
}};
hello.vue
<template>
<h1>[[ greeting ]]</h1>
</template>
<script>
module.exports = {
data: function () {
return {
greeting: 'Привет Webpack'
}
}
}
</script>
index.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Главная страница</title>
<script src="{% static 'build.js' %}"></script>
</head>
<body>
<hello></hello>
</body>
</html>
Подскажите, что у меня не правильно и что мне надо исправить?
Простой
Средний
