I have an application that I am developing in django and I want to use VUE js as a library but not as a framework, download the library and import it but I do not even work the example of vue
Base.html The lbreira de vue is imported here
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'core/assets/images/favicon.png' %}">
<title>{% block title %}{% endblock %}</title>
<!-- Custom CSS -->
<link href="{% static 'core/dist/css/style.min.css' %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
{% block css %}{% endblock %}
</head>
<body class="skin-default fixed-layout">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Unidades Tecnológicas de Santander</p>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar">
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'core:index' %}">
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<img src="{% static 'core/assets/images/logo-icon.png' %}" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="{% static 'core/assets/images/logo-light-icon.png' %}" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- dark Logo text -->
<img src="{% static 'core/assets/images/logo-text.png' %}" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="{% static 'core/assets/images/logo-light-text.png' %}" class="light-logo" alt="homepage" /></span> </a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler d-block d-md-none waves-effect waves-dark" href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link sidebartoggler d-none d-lg-block d-md-block waves-effect waves-dark" href="javascript:void(0)"><i class="icon-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- User Profile -->
<!-- ============================================================== -->
<li class="nav-item dropdown u-pro">
<a class="nav-link dropdown-toggle waves-effect waves-dark profile-pic" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="{% static 'core/assets/images/users/1.jpg' %}" alt="user" class=""> <span class="hidden-md-down">Mark <i class="fa fa-angle-down"></i></span> </a>
<div class="dropdown-menu dropdown-menu-right animated flipInY">
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
<!-- text-->
<div class="dropdown-divider"></div>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
<!-- text-->
<div class="dropdown-divider"></div>
<!-- text-->
<a href="pages-login.html" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
<!-- text-->
</div>
</li>
<!-- ============================================================== -->
<!-- End User Profile -->
<!-- ============================================================== -->
<li class="nav-item right-side-toggle"> <a class="nav-link waves-effect waves-light" href="javascript:void(0)"><i class="ti-settings"></i></a></li>
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="user-pro"> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><img src="{% static 'core/assets/images/users/1.jpg' %}" alt="user-img" class="img-circle"><span class="hide-menu">Mark Jeckson</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void(0)"><i class="ti-user"></i> My Profile</a></li>
<li><a href="javascript:void(0)"><i class="ti-wallet"></i> My Balance</a></li>
<li><a href="javascript:void(0)"><i class="ti-email"></i> Inbox</a></li>
<li><a href="javascript:void(0)"><i class="ti-settings"></i> Account Setting</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</li>
<li class="nav-small-cap">--- PERSONAL</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-people"></i><span class="hide-menu">Estudiantes <span class="badge badge-pill badge-cyan ml-auto">2</span></span></a>
<ul aria-expanded="false" clas s="collapse">
<li><a href="{% url 'estudiante:list' %}">Listar </a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-wrench"></i><span class="hide-menu">Administrador <span class="badge badge-pill badge-cyan ml-auto">2</span></span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="{% url 'semestre:list' %}">Semestres</a></li>
<li><a href="#">Generos</a></li>
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h4 class="text-themecolor">{% block titlulo_pagina %}{% endblock %}</h4>
</div>
<div class="col-md-7 align-self-center text-right">
<div class="d-flex justify-content-end align-items-center">
{% block atras %}
{% endblock atras %}
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<div class="right-sidebar">
<div class="slimscrollright">
<div class="rpanel-title"> Configuración de panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default" class="default-theme working">1</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green" class="green-theme">2</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red" class="red-theme">3</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue" class="blue-theme">4</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple" class="purple-theme">5</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna" class="megna-theme">6</a></li>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default-dark" class="default-dark-theme ">7</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green-dark" class="green-dark-theme">8</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red-dark" class="red-dark-theme">9</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue-dark" class="blue-dark-theme">10</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple-dark" class="purple-dark-theme">11</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna-dark" class="megna-dark-theme ">12</a></li>
</ul>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer">
© 2018 Unidades Tecnológicas de Santander
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="{% static 'core/assets/node_modules/vue/vue.min.js' %}"></script>
<script src="{% static 'core/assets/node_modules/jquery/jquery-3.2.1.min.js' %}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{% static 'core/assets/node_modules/popper/popper.min.js' %}"></script>
<script src="{% static 'core/assets/node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{% static 'core/dist/js/perfect-scrollbar.jquery.min.js' %}"></script>
<!--Wave Effects -->
<script src="{% static 'core/dist/js/waves.js' %}"></script>
<!--Menu sidebar -->
<script src="{% static 'core/dist/js/sidebarmenu.js' %}"></script>
<!--stickey kit -->
<script src="{% static 'core/assets/node_modules/sticky-kit-master/dist/sticky-kit.min.js' %}"></script>
<script src="{% static 'core/assets/node_modules/sparkline/jquery.sparkline.min.js' %}"></script>
<!--Custom JavaScript -->
<script src="{% static 'core/dist/js/custom.min.js' %}"></script>
{% block scripts %}{% endblock %}
</body>
</html>
Base.html
{% extends 'core/base.html' %}
{% block title %}Principal{% endblock %}
{% block titlulo_pagina %}Principal{% endblock %}
{% block content %}
<h1>Inicio Hola mundo</h1>
<div id="app">
{{ message }}
</div>
{% endblock %}
{% block scripts %}
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
{% endblock scripts %}
This is what it gives me as a result, it does not show me anything
I already checked the scripts and I am also loading them
I hope you can help me, thank you very much