Как настроить vue в django?

335
19 апреля 2017, 13:02

Пытаюсь настроить 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>

Подскажите, что у меня не правильно и что мне надо исправить?

READ ALSO
Axios-запрос не работает. Почему?
javascript

Axios-запрос не работает. Почему?

Проблема - axios-запрос не цепляется к серверуОшибка "Network Error"

 245
Replace duplicate elements to &#39;default&#39;
javascript

Replace duplicate elements to 'default'

Необходимо написать jquery/js script, который бы при выставлении (в моем случае при выборе из селекта и нажатии на кнопку) двух одинаковых значений...

 179
Открыть связанный с div-ом блок при клике на него
jQuery

Открыть связанный с div-ом блок при клике на него

Здравствуйте! Помогите, пожалуйста Есть табличка, при клике на одну из её ячеек, внизу таблички должен показываться связанный с ней скрытый...

 215
Не удается расширить jQuery prototype
jQuery

Не удается расширить jQuery prototype

При попытке вызвать jQuery('class')

 201