Vue-Bootstrap 不适用于 Django。我怎样才能正确开始呢?
Posted
技术标签:
【中文标题】Vue-Bootstrap 不适用于 Django。我怎样才能正确开始呢?【英文标题】:Vue-Bootstrap doesn't work with Django. How can I start with it correctly? 【发布时间】:2019-06-04 00:25:00 【问题描述】:我真的是 VueJS 的新手。我正在尝试使用 vue-bootstrap 而不是通常的引导程序(包括 jquery)。
但即使没有错误,它也根本不起作用。已加载所有文件。
base.html
% load static %
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>
% block content %
% endblock content %
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</body>
我从 vue-bootstrap doc 的示例中复制了这个 https://bootstrap-vue.js.org/docs/components/navbar/
index.html
% extends 'base.html' %
% block content %
<b-navbar toggleable="md" type="dark" variant="info">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
<template slot="button-content">
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
% endblock content %
但它显示为this
我有什么问题?
【问题讨论】:
您是否可能在 src="... 前面缺少一个“https:”? 但是根据文档,这种方式是正确的。 bootstrap-vue.js.org/docs 我明白了。似乎很奇怪。也许还是试试吧,只是为了好玩。 【参考方案1】:您没有创建 Vue 实例,这就是它不起作用的原因。
<script>
new Vue( el: '#app' );
</script>
每个 Vue 应用程序都从创建一个新的 Vue 实例开始 Vue 函数。请参阅more 的文档。
这是有效的实现。
<html>
<head>
<link
type="text/css"
rel="stylesheet"
href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>
</head>
<body>
<div id="app">
<b-navbar toggleable="md" type="dark" variant="info">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
<template slot="button-content">
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
new Vue( el: '#app' );
</script>
</body>
</html>
顺便说一句,使用协议相关的 URL 在我的本地上不起作用,所以我必须将 https
放在我导入的脚本和样式表的前面。
【讨论】:
不用担心。你是 Vue 的新手,我们都会犯错误。以上是关于Vue-Bootstrap 不适用于 Django。我怎样才能正确开始呢?的主要内容,如果未能解决你的问题,请参考以下文章