Web Component

Vue

非vue3以上版本或者webpack不支持语法时，采用兼容方式引入

导入节点模块

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from '@hizsh/wc-ship/loader'

告诉 Vue 忽略自定义元素标签

// Tell Vue to ignore all components defined in the @hizsh/wc-ship
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/wc-\w*/];

将 Stenciljs 组件代码绑定到窗口对象

// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements();
});

然后这些组件应该在任何 Vue 组件中都可用

<div>
  <test-stencil-component></test-stencil-component>
</div>

上述用于集成 Stencil 自定义元素库的技术已经在使用vue-cliES2015 和 WebPack 作为主要选项创建的 Vue 应用程序上进行了测试。

• 注 wc-ship-location(船位置组件) 组件特殊 需要外部js脚本

  <script src="//api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
  <!-- 船讯网api 需要自己申请 -->
  <script src="http://api.shipxy.com/h5/api/?v=3.0"></script>

  <wc-ship-location  style="
    position: absolute;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    text-align: center;
    background-color: #A3CCFF;
    box-sizing: border-box;">
    <h1 slot="search">mr zhou</h1>
  </wc-ship-location>

Framework Integration

各个框架的使用方式参考stencil官方文档Framework Integration