[英]Vue.js, Router importing template vue file
Hi Guys I got a simple Vue.js project and I am trying to import a vue template file into my index.html file without using the cli-tools like webpack or browserify.大家好,我有一个简单的 Vue.js 项目,我正在尝试将一个 vue 模板文件导入我的 index.html 文件,而不使用 webpack 或 browserify 之类的 cli 工具。
As far as i understood I would need to use something called a router to be able to todo this and import some extra JS in my project.据我了解,我需要使用称为路由器的东西才能做到这一点并在我的项目中导入一些额外的 JS。
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
In my index.html script tag i am creating a new object which refers to my navigation component which i wanna include.在我的 index.html 脚本标签中,我正在创建一个新对象,它引用我想要包含的导航组件。
var Settings = httpVueLoader('Navigation.vue') ,
router = new VueRouter({
routes:[
{ path:'/navigation', component: Navigation }
]
});
I wanna be able to just use the <navigation></navigation>
tag inside my index.html file to get whatever code is inside the Navigation.vue file.我希望能够在我的 index.html 文件中使用
<navigation></navigation>
标记来获取 Navigation.vue 文件中的任何代码。
I got a codepen with my project here: https://codepen.io/fennefoss/project/editor/ZerEod#我在这里的项目中有一个 codepen: https ://codepen.io/fennefoss/project/editor/ZerEod#
You don't need vue-router
here, just import the Navigation
component like this: import navigation from "./Navigation.vue"
And use it as <navigation/>
in HTML code.这里不需要
vue-router
,只需像这样导入Navigation
组件: import navigation from "./Navigation.vue"
并在 HTML 代码中作为<navigation/>
使用。
Vue-router
is being used for different routes management. Vue-router
被用于不同的路由管理。
i think you need export Navigation.vue , btw your style tag & script tag Put outside template ,like this我认为您需要导出 Navigation.vue ,顺便说一下您的样式标签和脚本标签放在模板之外,就像这样
Navigation.vue:导航.vue:
<template id="navigation">
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</template>
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
<script>
module.exports = {
data: function () {
return {};
},
mounted: function () {
function myFunction(x) {
x.classList.toggle("change");
}
}
};
</script>
Using a module bundler would always be better for many reasons, one being maintainability.由于许多原因,使用模块捆绑器总是更好,其中一个原因是可维护性。 But if you can't, try registering the component in the script file, like so:
但如果不能,请尝试在脚本文件中注册组件,如下所示:
Vue.component('navigation', {
template: `
<p>Click on the Menu Icon to transform it to "X":</p>
<div v-bind:class="[ 'container', { 'change': active } ]" @click="myFunction">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
`,
data() {
return {
active: false
}
}
methods: {
myFunction(x) {
this.active = !this.active;
// do your other logic here if need be
}
}
})
const app = new Vue({
el: '#app',
data() {
return {
products: [],
showMobileMenu: false,
productHeadline: 'Product Flow Tool'
}
},
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created() {
fetch('https://www.fennefoss.dk/sample.json')
//fetch('./sample.json')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
<div id="app">
<navigation></navigation>
</div>
You still need to put the CSS files somewhere though, and that's the good part about using a module bundler -- to enable single file components .不过,您仍然需要将 CSS 文件放在某个地方,这是使用模块捆绑器的好处——启用单个文件组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.