방금 VueJS를 시작하고 있으며 현재 Webpack-Loader를 사용하여 Django 프로젝트에 추가하려고합니다.
다음 두 파일이 있습니다.
앱보기
<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을로드 할 때 첫 번째 Vue 앱에 오신 것을 환영하고 두 번째 앱에 오신 것을 환영 하지 않음 이 표시되기 때문에 로드되지 않는 것 같습니다. 내 템플릿에서 vue_app_02
.
나는이 질문이 매우 기본적이라는 것을 알고 있지만, 나는 이것에 매우 익숙하고 모든 것이 매우 혼란 스럽습니다. 나는 무엇을 필요로 main.js
하고 index.js
, index.html
. 어떤 종류의 조언이라도 감사합니다
vue 라우터에 app02.vue를 추가해야합니다.
이 사이트는 vue 라우터를 만드는 데 도움이 될 수 있습니다.
https://saidhayani.medium.com/understand-routing-in-vue-js-with-examples-6da96979c8e3
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다