vue 如何合并兩個 項目_javascript – 如何将Angular和Vue項目合并在一起？

我讀了這方面的各種資源,但仍然無法找到方法.這裡的問題是我想将兩個不同的項目合并在一起.我的同僚正在研究他在AngularJS中設計的一個功能.我使用VueJS開發了我的功能.管理層随後決定将兩者合并在一起.在第一個項目啟動的使用者界面中,将提供一個連結,從我的網頁在VueJS中設計的位置開始.

我使用npm start在本地運作我的項目在VueJS伺服器上,也使用快速伺服器.但是第一個項目隻運作節點app.js然後在本地運作.

以下是他的項目描述的截圖：

這是我的項目細節：

我的index.html檔案包含以下内容：

Error Details and Description

第一個項目中包含的另一個index.html包含我的應用程式将通過其啟動的連結的代碼.該連結包含此代碼,可以重定向到我的代碼：

Administration

• Manage Error Descriptions

相應的errorinput.js檔案包含以下代碼：

'use strict';

app.config(function ($routeProvider) {

$routeProvider

.when("/errorinput", {

templateUrl: "views/errorinput.html"

});

});

app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {

// Implement me!

}]);

知道如何将它們合并在一起以獲得所需的功能嗎？

編輯：是以我确實找到了在一台伺服器上運作這兩個項目的方法.我在我的VueJS項目中包含了AngularJS的所有依賴項.角應用程式運作正常,但現在,VueJS網頁沒有與angularJS一起出現.當我給出我的VueJS應用程式的相對路徑時,它似乎在背景.任何想法我現在如何在這個引導的AngularJS應用程式中路由我的VueJS？這裡提到了有關此問題的更多詳細資訊：

解決方法:

And they are entirely independent from each other as well. There is no

link in the first project app from where my app needs to be launched.

看起來你可以嘗試酷Micro Frontend.

MicroFrontend是一種新的應用程式範例,前端服務被組織為不同的應用程式,并通過前端的事件總線進行通信.

有不同的方法來實作這一點：

>在不同的iFrame中渲染它們并通過postMessage API進行通信

>在不同的URL上渲染它們,但使用具有公共依賴關系管理的event bus.

>使用單SPA Framework.

由于您說應用程式不需要互相通信,是以SPA架構對您來說更容易.它是該領域非常成熟的架構,支援前端架構,包括Vue和AngularJS,但不限于這些選項.

如何使這項工作有效地建立一個具有不同div的HTML：

這樣他們就不會互相改變.

建立一個SPA檔案作為應用程式的配置.

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('angular', () =>

import ('../app1/angular1.app.js'), pathPrefix('/app1'));

singleSpa.registerApplication('vue', () =>

import ('../app2/vue.app.js'), pathPrefix('/app2'));

singleSpa.start();

function pathPrefix(prefix) {

return function(location) {

return location.pathname.startsWith(`${prefix}`);

}

}

您可以在此配置Here上找到更多詳細資訊

安裝相應的SPA插件(單例spa-vue和單spa-angular)後,我們必須告訴single-spa安裝和解除安裝架構所需的生命周期挂鈎.

在vue的情況下：

import Vue from 'vue/dist/vue.min.js';

import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({

Vue,

appOptions: {

el: '#vue-app'

template: `

Vue Works

`

}

});

export const bootstrap = [

vueLifecycles.bootstrap,

];

export const mount = [

vueLifecycles.mount,

];

export const unmount = [

vueLifecycles.unmount,

];

您可以使用Vue和Angular Here.找到示例應用程式

Here是單一水療中心制造商的分步指南.還看看他們的examples.

希望有所幫助.

标簽：javascript,angularjs,node-js,angular-ui-bootstrap,vue-js

來源： https://codeday.me/bug/20190611/1216332.html