当前位置: 首页 > article >正文

把一个Vue项目的页面打包后再另一个项目中使用

步骤:

1.项目1新建一个js文件,引入我们需要使用的vue页面:

// 引入组件
import indexVue from './index.vue'

// install
indexVue.install = function (Vue) {
  Vue.component("indexVue", indexVue)
  // Vue.component(FlowEditorVue.name, FlowEditorVue)
}


// 导出
export default indexVue


2.在项目1的package.json中添加命令将刚才导出的vue页面进行打包;

"lib": "vue-cli-service build --mode prod --target lib --name indexVue --dest lib src/views/workflow/work/index.js"

3.在你需要使用的项目中将打包后的lib目录放在项目2的public目录下;


4.然后再项目2的main.js文件中引入我们lib中的common.js并使用它;

import indexVue from '../public/lib/indexVue.common.js'
Vue.use(indexVue)



5.再我们的项目2的页面中直接使用它;
 

<template>
  <div class="app-container">
    <index-vue></index-vue>
  </div>
</template>
<script>

export default {
  name: 'WorkProcess',

  data() {
    return {}

  },
}
</script>

<style scoped>

</style>


http://www.kler.cn/a/450788.html

相关文章:

  • Zerotier + VSCode远程连接实验室的服务器、Xshell连接远程服务器
  • SDMTSP:黑翅鸢算法(Black-winged kite algorithm,BKA)求解单仓库多旅行商问题,可以更改数据集和起点(MATLAB代码)
  • 【NLP 17、NLP的基础——分词】
  • SharpDX 从入门到精通:全面学习指南
  • VMware vCenter保姆级安装部署(VMware VCenter Nanny Level Installation and Deployment)
  • Selenium 和 Playwright两大框架的不同之处
  • 怎样配备公共配套设施,才能让啤酒酿造流程高效环保?
  • 【Python】理解Python的__slots__:节省内存和提升性能
  • 【机器学习案列】使用随机森林(RF)进行白葡萄酒质量预测
  • 高级技术文章:使用 Kotlin 和 Unirest 构建高效的 Facebook 图像爬虫
  • Docker Build 命令详解:在 Ubuntu 上构建 Docker 镜像教程
  • 【教程】第十一章 子任务 工时——化繁为简
  • 【es6复习笔记】Spread 扩展运算符(8)
  • STM32 高级 谈一下IPV4/默认网关/子网掩码/DNS服务器/MAC
  • 电脑文件wlanapi.dll有什么用?找不到wlanapi.dll文件四种详细解决方法
  • 结合实例从HCI层分析经典蓝牙连接和配对过程
  • cursor保存更改操作技巧
  • MimicBrush:智能图像编辑新宠,能否革新你的创意设计?
  • Unity-URP设置单独渲染UI相机
  • 数据结构:算法篇:快速排序;直接插入排序
  • 迪文串口屏_T5L平台_界面状态图标显示和隐藏
  • 51单片机之RTC电子钟
  • 虚幻引擎是什么?
  • 《通义千问AI落地—中》:前端实现
  • Windows如何切换用户访问局域网共享文件夹,如何切换网上邻居的账户
  • 仿闲鱼的二手交易小程序软件开发闲置物品回收平台系统源码