传统HTMl页面，Vue2中使用Vue3自定义组件

橙樱

于 2024-05-20 11:22:49 发布

阅读量403

点赞数 4

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_38902432/article/details/139059996

版权

需求背景：

最近公司让前端将现有的Vue3组件开发成通用的组件库，即在任何web应用中都可以通过script标签引用资源的方式使用。

当各位听到这个需求，脑子🧠里的第一个方案是不是重新写一个JS库？我们当时不仅是这样想的还是这样干的，领导让我们3个人分别调研这个需求。

由于我们的组件是一些跟AI相关的，已有功能都是用Vue3开发的，如果重新用原生js开发一个工具库说真的很麻烦，工作量也大。当时就想能不能将vue3组件打包后直接应用在应用中，接着就是不停的在百度中搜索相关资料，功夫不负有心人，总算是有了一些思路。

🔗html中如何用vue语法，并使用UI组件库，html中引入vue+ant-design-vue或者vue+element-plus

我们小组顺着上面的思路，最后探索出了以插拔的形式将Vue3自定义组件应用到任何web应用中。

//loadVuePlugin.js

;(function (global) {
  if (global._aiHelper) {
      return
  }
  var doc = document,
      headEl = doc.getElementsByTagName('head')[0],
      baseElement = doc.getElementsByTagName('body')[0],
      url='./'

  function insertTag(tag, url) {
      var node = doc.createElement(tag)
      if (tag === 'link') {
          node.rel = 'stylesheet'
          node.href = url
      } else {
          node.src = url
          node.async = false
      }
      headEl.appendChild(node)
  }

  var exports = (global._aiHelper = {
      get: function () {
          insertTag('script', url + '/vue.js')
          // insertTag('link', url + '/element-plus.css')
          // insertTag('script', url + '/element-plus.js')
          insertTag('link', url + '/style.css')//vue3组件打包后的css文件
          insertTag('script', url +  '/ai-tool.umd.cjs')//vue3组件打包后的js文件
          var tagEl = doc.createElement('div')
          tagEl.id = 'componentContainer'
          tagEl.innerHTML = `<ai-tool></ai-tool>`//vue3自定义组件名称
          baseElement.appendChild(tagEl)
      }
  })
})(this)

_aiHelper.get()
window.onload = () => {
  Object.assign(window, Vue)
  const app = createApp().use(aiTool).mount('#componentContainer') //初始化
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<body>

		<script type="text/javascript" src="./loadVuePlugin.js" id="jszhshelper"></script>
	</head>
	</body>
</html>

橙樱

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
传统HTMl页面，Vue2中使用Vue3自定义组件

由于我们的组件是一些跟AI相关的，已有功能都是用Vue3开发的，如果重新用原生js开发一个工具库说真的很麻烦，工作量也大。当时就想能不能将vue3组件打包后直接应用在应用中，接着就是不停的在百度中搜索相关资料，功夫不负有心人，总算是有了一些思路。最近公司让前端将现有的Vue3组件开发成通用的组件库，即在任何web应用中都可以通过script标签引用资源的方式使用。我们小组顺着上面的思路，最后探索出了以插拔的形式将Vue3自定义组件应用到任何web应用中。
复制链接

扫一扫