1

我在 Vuejs 中有一个简单的表单。我同样使用了 VueMaterial。现在，作为下一步，我想将此表单/应用程序/微应用程序制作成我们可以调用的任何 Web 组件/共享组件。

我的代码如下

main.js

import Vue from 'vue';
import App from './App.vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
import wrap from '@vue/web-component-wrapper';

Vue.use(VueMaterial);

Vue.config.productionTip = false;
const CustomElm = wrap(Vue, App);

window.customElements.define('custom-elem', CustomElm);

应用程序.vue

<template>


<div id="app">
    <CustomerDetails msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import CustomerDetails from "./components/CustomerDetails.vue";

export default {
  name: "app",
  components: {
    CustomerDetails
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

首先，如果我的最终目标是微前端，我不确定我的方法是否正确。

我的意思是，（方法 #1）我应该使用样式化组件并将基本/UI/哑组件编译成 Web 组件。然后使用这些已经编译的 web 组件，让我们现在说 Vue.js，在我更大的 Vue.js 中，Form Component或者通过（方法＃2）在 Vue.js 中做所有事情，最后在 Vue.js 中编译完整的Form组件到 Web 组件转换为相同？

其次，如果上述两种方法相同并且不会产生影响，并且取决于我想要制作组件的大小。然后按照上面的方法 #2，我无法在编译的 Web 组件中看到 VueMaterial。

第三，如果方法#1 更适合首先做更简单的组件，然后在任何框架（Angular、React、Vuejs）中使用相同的组件，那么当我在 Vuejs CLI 中编译组件时，它会删除dist文件夹并吐出新的文件夹。所以，假设我希望我的基础/UI/Dumb 组件作为从 Vuejs + Styled 组件或 Ant Design/material design 到这些组件的 Web 组件库的 Web 组件，我该如何管理 Vuejs 中的编译部分，以便我可以做一个进口

import {Button, Card, Input} from 'my-web-components';

好的，一种方法是一个一个地手动构建每个组件并将它们复制到一个文件夹my-web-components中并发布相同的npm package内容或将其保留为内部使用。所以，在这里寻找更好的方法！

想到的另一个问题是，如果我确实采用这种方法，当我将 Vue 中的表单组件编译为 Web 组件并且无法渲染 VueMaterial 时，我会不会遇到与现在遇到的相同的问题. 我的困惑是我不确定我是否为 Vuejs 使用样式化组件，我的 Web 组件将如何以精确的样式编译等。

这很宽泛，但希望我在这里已经将所有开始的想法缩小到微前端方法！

期待您的回答。

4

0 回答 0