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