angular 中混用vue解决方案

使用vue2

关键技术点:

web component

vue component

参考文档

https://blog.enginaar.com/vue-angular-together-in-one-app/

使用vue3

注意:

• 现行vue3版本不支持 web component (vue3 2.x)
• vue的相关特性如事件、双向绑定等特性无法使用vue组件时直接用,需要相关处理放在vue组件内部完成

直接引入文件方式

1. 在angular 项目中找到 index.html 文件,将需要引入的vue 组件的js和css 引入

  
  
  
  
  
  

  
  
  


  



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 在angular 项目中 @NgModule 制定 schemas: [CUSTOM_ELEMENTS_SCHEMA]

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
 declarations:[]
 })
 
1
2
3
4
5
6
7

3、使用vue 组件

html 文件

  
  

    Primary
    
    
  



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ts文件

// 添加 Vue 的声明
declare var Vue: any;

export class DefaultComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
    
    // 关键代码
    Vue.createApp({
    }).use(vueComponent) // 注册 vue 组件
      .mount('#defaultCp')

  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

npm 方式

1. 将vue 组件打包成umd 格式的包
2. 在webpack配置中通过 resolver 引入
3. 在 angular 的ngModule 中添加 CUSTOM_ELEMENTS_SCHEMA
4. 通过require 或 import 使用