How to set up vue in django?

J

JonGalt2017-04-18 13:44:46

Django

JonGalt, 2017-04-18 13:44:46

Trying to set up vue in django. I went through everything that is possible, but I did not find a normal full-fledged guide. I'm trying to run
package.json bit by bit

{
  "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></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>

Can you tell me what is wrong and what I need to fix?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

DanTheMan, 2017-04-22
@DanTheMan

In django views.py

from django.template import loader
 from django.shortcuts import render

 def index(request):
  return render(request, 'index.html')

And in index.html there should be a vue script