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