django & Vue.js：为什么我的 VueJs 组件没有显示在前端？答案

【问题标题】：django & Vue.js: Why is my VueJs component not showing in the frontend?django & Vue.js：为什么我的 VueJs 组件没有显示在前端？
【发布时间】：2018-09-17 13:05:59
【问题描述】：

我正在尝试在当前的 django 项目中实现 vuejs。但组件没有显示在前端。我的应用程序是“主页”，我在模型中有一个名为“游戏”的类，并在称为“游戏”的视图中运行所以这里我有我的基本 vue 组件

<template>
<div id="">
<table>
    <tr><td>Titre    </td><td>Nom   </td></tr>
 <tr v-for="game in liste">

 <td>{{game.fields.titre}}</td>
 <td>{{game.fields.nom}}</td>
 </tr>

</table>
</div>
</template>
<script>

export default{
    data(){
      return{
         liste: []
      }
    },
    mounted(){
      this.$http.get("/homepage/games").then( (req) => this.liste = 
  req.data)
    }
}

  </script>

  <style>
  </style>

App.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import Exemple from './components/Exemple.vue'

Vue.use(VueResource)
new Vue(Exemple).$mount(".exemple")

index.html

{% extends "layout.html" %}
{% block content %}
<h1>hello this is challenge 2 tow</h1>
  <div class="exemple">
     <exemple></exemple>
  </div>
{% endblock %}

layout.html

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
    <script src="{% static 'public/bundle.js' %}"></script>
</html>

views.py

from django.shortcuts import render
from django.core.serializers import serialize
from django.http import HttpResponse

from .models import Games

def games(request):
    games = serialize("json", Games.objects.all())
    return HttpResponse(games, content_type="application/json")

我安装了 vue 开发工具，它告诉我“未检测到 Vue.js。请问有什么解决办法吗？！！提前谢谢你

【问题讨论】：

你浏览器的开发者工具箱是怎么说的？
当我点击它时，它显示“未检测到 Vue.js”
不，不是 vue 开发工具； chrome 控制台说什么？
控制台什么也没写，是空的！！

标签： python django webpack vue.js

【解决方案1】：

我发现了错误，我应该给<div id="" >一个类名所以这里是正确的代码：

<template>
<div class="example">
<table>
    <tr><td>Titre    </td><td>Nom   </td></tr>
 <tr v-for="game in liste">

 <td>{{game.fields.titre}}</td>
 <td>{{game.fields.nom}}</td>
 </tr>

</table>
</div>
</template>
<script>
export default{
    data(){
      return{
         liste: []
      }
    },
    mounted(){
      this.$http.get("/homepage/games").then( (req) => this.liste = 
req.data)
    }
}

</script>

<style>
.example {
color: red;
}
</style>

【讨论】：