如何使用 webpack 从模板加载 VueJS 应用程序？

Posted 2023-02-22

【中文标题】如何使用 webpack 从模板加载 VueJS 应用程序？

【英文标题】：How can i load a VueJS app from a template using webpack?

【发布时间】：2021-03-29 22:49:00

【问题描述】：

我刚刚开始使用 VueJS，目前正在尝试使用 Webpack-Loader 将其添加到我的 Django 项目中。

我有以下两个文件：

App.vue

<template>
  <div id="app">
    <img  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  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>

这是我的 ma​​in.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您的第二个应用，尽管我正在从我的模板加载vue_app_02。

我知道这个问题非常基本，但我对此很陌生，一切都非常混乱，我不明白我需要什么 main.js 和其他文件，如 index.js、index.html。任何形式的建议表示赞赏

【参考方案1】：

您必须将 app02.vue 添加到 vue 路由器中

本站可以帮你创建vue路由器

https://saidhayani.medium.com/understand-routing-in-vue-js-with-examples-6da96979c8e3