时间戳

首页 > 解决方案 > Vue.js 和构建多页 Web 应用程序 - 组件注册

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

问题描述

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

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

我的方法

我创建了一个main.js文件，我在其中全局注册了一些组件，而那些仅由特定组件使用的组件当然只会在本地注册。所以，基本上每个页面都会有它自己的组件注册 gloablly...（顺便说一句，我使用 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"
});

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

标签： javascriptvue.jsasp.net-core-mvcmulti-page-application

解决方案

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

推荐阅读