Django和Vuetify

Django和Vuetify,django,vuetify.js,Django,Vuetify.js,早上好,下午好,或者晚上好。你好吗?我正在使用著名的Python好友Django实现一个应用程序,在它内部,我将VueJs与VueJs一起使用Vuetify。我总是在Django中使用和创建API,并在Vuetify上使用它。然而,我面临着在Django内部使用Vuetify并使用其CDN的挑战,但我有很多困难,我想知道堆栈中是否有人去过那里。(如果有疑问,不是在django项目中安装npm,而是使用并调用组件.Vue,就像这样使用cdn)在django的base.html中,我能够重新调整Vu

早上好,下午好,或者晚上好。你好吗?我正在使用著名的Python好友Django实现一个应用程序,在它内部,我将VueJs与VueJs一起使用Vuetify。我总是在Django中使用和创建API,并在Vuetify上使用它。然而,我面临着在Django内部使用Vuetify并使用其CDN的挑战,但我有很多困难,我想知道堆栈中是否有人去过那里。(如果有疑问,不是在django项目中安装npm,而是使用并调用组件.Vue,就像这样使用cdn)在django的base.html中,我能够重新调整Vue页面的大小

<!DOCTYPE html>
{% load static %}
<!--{% url 'social:begin' 'google-oauth2' as url_login_gmail %}-->

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Odontotolgia Undb</title>
    <link rel="shortcut icon" href="https://www.undb.edu.br/hubfs/avatar_site.png">

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <style type="text/css">
        a{
            color: #fff;
            text-decoration: none;
            text-decoration-line: none;
            text-decoration-style: initial;
            text-decoration-color: initial;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <v-card height="665px" >
            
            <v-navigation-drawer
              v-model="drawer"
              :mini-variant.sync="mini"
              permanent
              absolute
            >
            
              <v-list-item class="px-4">
                
                <v-list-item-avatar>
                  <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
                </v-list-item-avatar>
                
                <v-list-item-title> &nbsp; {{ request.user.username }} </v-list-item-title>
                  <v-btn
                  icon
                  @click.stop="mini = !mini"
                  >
                    <v-icon>mdi-chevron-left</v-icon>
                  </v-btn>
              </v-list-item>
              
              <v-divider></v-divider>
              <v-list dense>

                <v-btn block depressed>
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon> mdi-home-city </v-icon>
                    </v-list-item-icon>
          
                    <v-list-item-content>
                      <v-list-item-title>&nbsp; INICIO </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-btn>
                <v-btn block depressed>
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon> mdi-account </v-icon>
                    </v-list-item-icon>
          
                    <v-list-item-content>
                      <v-list-item-title>&nbsp; MINHA CONTA </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-btn>
                  <v-btn block depressed>
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon> mdi-dialpad </v-icon>
                    </v-list-item-icon>
                    <!---se autenticado como funcionario aparecer aqui-->
                    <v-list-item-content>
                      <v-list-item-title>&nbsp; STATUS ALUNOS </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                  </v-btn>
                  </v-list>
                  <v-divider></v-divider>
                </v-navigation-drawer>
              </v-card>
            </div>
        

    
    <script src="{% static 'vue.js' %}"></script>
    <script src="{% static 'vue-resource.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    {% block componentes_other_views %}{% endblock %}
    {% block vuejs %}

    <script type="text/javascript">
    
    
      var app = new Vue({
                el: '#app',
                delimiters: ["[[", "]]"],
                vuetify: new Vuetify(),
                components: {
                  status,
                },
                data () {
            return {
                drawer: true,
                mini: true,
                
                    }
                },
            })
        </script>
    {% endblock vuejs %}
</body>

</html>

{%load static%}
牙痛
a{
颜色:#fff;
文字装饰:无;
文字装饰线:无;
文字装饰风格:首字母;
文字装饰颜色:首字母;
}
{{request.user.username}
mdi V形左
mdi母城
伊尼西奥
mdi帐户
明哈康塔
拨号板
阿鲁诺斯状态
{%block组件\其他\视图%}{%endblock%}
{%block vuejs%}
var app=新的Vue({
el:“#应用程序”,
分隔符:[“[”,“]]”,
vuetify:新的vuetify(),
组成部分:{
地位
},
数据(){
返回{
抽屉:是的,
米尼:是的,
}
},
})
{%endblock vuejs%}
所以现在我想调用组件。如果有人已经做了或者正在看,你可以帮我,我会很感激的