Vue.js和结构化多页web应用程序-组件注册

Question

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

我已经搜索了很多关于构建代码的更好方法。我还看了一下PHP Laravel 5.x是如何做到这一点的，他们似乎采取了与我使用的方法相同的方法

我的方法

我创建了一个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"
});

随着网络应用程序的发展，我想这个文件将变得巨大——塞满了组件注册。所以我的问题是：有其他方法吗

Answer 1

您可以使用vue-cli构建您的项目(https://github.com/vuejs/vue-cli)它现在是一个候选版本，默认情况下集成了webpack。使用命令"vue创建我的项目"，您将看到一个很好的项目脚手架。在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>

这里浮动菜单和显示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应用程序，一切正常！

如果您需要在不同的组件之间共享数据，任何标准的数据共享技术(如事件总线或Vuex)都可以正常工作。

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

Answer 3

您可以使用Vue CLI创建并合并到MVC核心项目。在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>
...