[英]How can i load a VueJS app from a template using webpack?
我刚刚开始使用 VueJS,我目前正在尝试使用 Webpack-Loader 将其添加到我的 Django 项目中。
我有以下两个文件:
应用程序.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your first Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
App02.vue
<template>
<div id="app02">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your second Vue.js App0"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app02',
components: {
HelloWorld
}
}
</script>
<style>
#app02 {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这是我的main.js :
import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
/* NOTE: unlike index.js, we are not passing props from our template, so the following render/mount
syntax is ok */
new Vue({
render: h => h(App),
}).$mount('#app');
最后,这是我的 Django html 模板:
{% load render_bundle from webpack_loader %}
{% block content %}
<h3>My second Vue app goes here</h3>
<div id="app">
<app></app>
</div>
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'vue_app_02' %}
{% endblock %}
我的代码的问题是它似乎没有加载App02
,因为当我加载 html 时,我会看到Welcome to your first Vue app而不是Welcome to your second app ,即使从我的模板中,我正在加载vue_app_02
。
我知道这个问题非常基础,但我对此很陌生,一切都很混乱,我不明白我需要什么main.js
和其他文件,如index.js
、 index.html
。 任何形式的建议表示赞赏
您必须将 app02.vue 添加到 vue 路由器中
这个站点可以帮助你创建 vue 路由器
https://saidhayani.medium.com/understand-routing-in-vue-js-with-examples-6da96979c8e3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.