Vue.js 和构建多页 Web 应用程序 - 组件注册

Question

我想将 Vue.js 用于 MVC Core 2.1 多页 Web 应用程序，但我认为我的方法有点古怪。

我已经搜索了很多更好的方法来构建我的代码。 我还研究了 PHP Laravel 5.x 是如何做到的，似乎他们采用了与我使用的方法相同的方法，有点。

我的方法

我创建了一个main.js文件，我在其中main.js注册了一些组件，而那些只被特定组件使用的组件当然只会在本地注册。 所以，基本上每个页面都会有自己的组件全局注册......（顺便说一句我使用Webpack）

import Vue from 'vue';
import Axios from 'axios';

import BaseLayout from './components/layout/BaseLayout.vue';
import BaseHeaderLayout from './components/layout/BaseHeader.vue';

import HomeIndex from './components/home/Index.vue';
import HomeCreate from './components/home/Create.vue';

import 'bootstrap/dist/css/bootstrap.css';

window.axios = Axios; // Make axios available throughout (assign as global variable)

// Layout components
Vue.component("base-layout", BaseLayout);
Vue.component("base-header", BaseHeaderLayout);

// Home/
Vue.component("home-index", HomeIndex);
Vue.component("home-create", HomeCreate);

new Vue({
    el: "#App"
});

随着 Web 应用程序的增长，我猜这个文件会变得很大 - 塞满了组件注册。 所以我的问题是：还有其他方法可以做到这一点吗？

Answer 1

你可以使用 vue-cli 来构建你的项目（ https://github.com/vuejs/vue-cli ），它现在是一个候选版本，默认集成了 webpack。 使用命令“vue create my-project”，您将看到一个不错的项目脚手架。 在 main.js 中，您只会放置根组件。 很抱歉我在移动设备上的格式不正确。

Answer 2

您可以做的是在页面的某些部分初始化 Vue 应用程序，方法是将它们包装在各种容器中，然后对所有需要 Vue 组件的页面执行相同操作。

我是这样做的，我有一个名为 vue-container 的容器类，它包装了我的组件调用，如下所示：

<div class="vue-container">
  <floating-menu></floating-menu>
  <show-pdf :resource="<%= @resource.as_json(current_user: current_user) %>"></show-pdf>
</div>

这里的 floating-menu 和 show-pdf 是两个 Vue 组件。

然后，在为所有页面导入的 app.js 文件中，我有以下代码：

if(window.vueapp == null){
  window.vueapp = []
}
if(window.vueapp != null){
  for(var i=0, len=vueapp.length; i < len; i++){
    vueapp[i].$destroy();
  }
  window.vueapp = []
}
var myNodeList = document.querySelectorAll('.vue-container');
forEach(myNodeList, function (index, element) {
  if (element != null) {
    var vueapp = new Vue({
      el: element,
      store,
      components: {
        ShowPdf, FloatingMenu
      }
    })
    window.vueapp.push(vueapp);
  }
});

这会在每个.vue-container元素上创建并初始化一个 Vue 应用程序，一切正常！

如果您需要在不同的组件之间共享数据，任何标准的数据共享技术（如 Event Bus 或 Vuex）都可以正常工作。

我写了一篇详细介绍此设置的博客文章： https : //blog.koley.in/2018/vue-components-in-multi-page-apps

Answer 3

您可以使用 Vue CLI 创建并合并到您的 MVC Core 项目。 在 vue.config.js 中，定义不同的入口，为每个使用自己 ​​Vue 实例的页面生成 js 文件。 见下文

//**
//vue.config.js
//
module.exports = {
    outputDir: './dist',
    filenameHashing: false,
    lintOnSave: false,

chainWebpack: config => {
        config.optimization
              .splitChunks(false);

        //output: ./dist/js/page1.js
        config.entry("page1")
              .add('./src/pages/page1/main.vue'); 

        //output: ./dist/js/page1.js
        config.entry("page2")
              .add('./src/pages/page2/main.vue');
}
//**
///src/page1/main.vue
//
import Vue from 'vue'
import HomeIndex from './components/home/Index.vue';
import HomeCreate from './components/home/Create.vue';

Vue.component("home-index", HomeIndex);
Vue.component("home-create", HomeCreate);

window.Vue = Vue;   //make Vue available to page


//**
//view/page1.html
//
...

<div id="app">
  ...
  <home-index />
  ...
  <home-create />
  ...
</div>
<script src="dist/js/page1.js"></script>
<script>
    new Vue({
      el: "#app",
      data: { ... }
      ...
     });

</script>
...