利用webpack配置,将vue项目中不同组件进行抽离,实现多项目维护一套代码

最新推荐文章于 2023-11-04 21:56:34 发布
最新推荐文章于 2023-11-04 21:56:34 发布
阅读量1k 收藏
点赞数
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_30834535/article/details/97386246
版权

只写了一个小demo,将vue中的一个vue单独抽离,可以类比于如果多个项目是类似的,只有某个文件不一样,那么一样的部分可以作为公用,直接维护项目中不一样的部分,节省维护成本,不多说了,直接上代码

将项目拆分成两个文件夹,一个是共用代码sameInfo,一部分是抽离代码differInfo
在这里插入图片描述
首先在differInfo中将抽离文件及package.json,router配置一下(home.vue)是我要抽离的
在这里插入图片描述
将sameInfo中package.json的依赖复制到differInfo的package.json中
在这里插入图片描述
将抽离出来的router写上
在这里插入图片描述
以上是要抽离出来的东西,接下来是在sameInfo中做的修改
在基础配置中配置上加载模块
在这里插入图片描述
在路由中也许修改
在这里插入图片描述
然后在sameInfo和differInfo文件夹中均npm install一下,在sameInfo中npm run dev 程序就启动起来啦啦啦啦啦
在这里插入图片描述

08 使用Vue+vue-router+路由守卫实现路由鉴权功能实战
xingyu_qie的专栏
03-26 5060
本文主要是router的拆分，通过进行路由守卫进行用户路由的鉴权控制，还包含了404页面的实现，el-button的自研实现
el-dialog+vue3抽离，父组件点击触发弹窗
最新发布
weixin_56733569的博客
01-04 753
el-dialog+vue3抽离，父组件点击触发弹窗
Vue——抽离组件
张文慧 期待每一天更好的自己
12-05 1309
建一个settingZwh.vue文件（子组件） 编写HTML代码 <template> <div> <img :src="picture" width="2%"/> <span>{{showButton}}</span> <van-switch size="24px" class...
Vue---组件模板抽离
北极星的博客
04-20 1112
文章目录一.为什么要组件模板抽离二.使用<script>标签三.使用<template>标签 一.为什么要组件模板抽离 我们作为计算机专业的IT人员，十分注意代码的质量，比如笔者非常赞同雷军写代码要写“诗一样的代码”，我们在上一篇《Vue—主件详解》就通过语法糖简化了我们的注册过程，但是我们通过观察，发现在Vue中写Html代码显然有些臃肿，所以我们想到可以通过模板抽离的方法将我们在Vue中的Html代码或是其他模板分离出来，使得我们的代码更加整洁。 没有使用组件模板分离前的实例：
Vue组件的抽离和封装
bob的博客
07-25 2045
1.背景 日常开发中，有时候有些组件是功能类似甚至完全相同的情况，这个时候我们完全没必要再重新写一个， 可以抽离复用可以减少大量的时间，案例： 像一些App底部的标签页，在进行一些标签的跳转时，底部的只是变化选中时的字体颜色和图标， 大部分的元素都相同。 2.抽离思路 2.1先抽出一个大的可以装里面小组件的大容器TabBar <div class='tabBar'> <tab-bar-item v-for="(val,index) in navBar" :path='val
vue.js三十八—— 抽离轮播图组件
武汉小喽啰
09-03 368
我们发现，在首页和商品详情都会使用到轮播图，但是，我们在首页的轮播图是写在页面中的，为了能够复用，我们可以将轮播图功能抽离成一个单独的组件。 1. 新建子组件swiper.vue模板 <template> <div> </div> </template> <script> export defau...
vue中 组件抽离方法合并实验 mixin.js
m0_53006021的博客
06-24 367
vue中 组件抽离方法合并实验 mixin.js
【VUE项目维护】多个项目提取共用组件的解决方案
Equicy的博客
05-10 1990
项目源码 https://github.com/equicy/vue-common-components 我们先来看一个项目目录，如果是你的需求，或许你该认真看完 需求场景 当一个产品被更多的客户认可，就有私人订制的需求。对于开发者来说最简单的肯定是复制粘贴，假如有新的更新或者一个bug，我们需要提交多次公共的代码；当然项目少还好，假如项目多一些，我们真就成了“拧螺丝”的螺丝工。当然这种场景很常见，在各大框架或者各大语言都有解决方案，我们今天就聊聊vue项目的使用场景。 调研 vue的开发者都了解vue
vuecli3多个项目共用组件动态打包单个项目
苏轻轻的专栏
11-08 5549
需求 项目处于缓冲期,时间充裕,于是从vuecli2.x将脚手架升级为vuecli3.x,并且需要多个项目引用一些公用封装的组件库,工具库或资源之类,于是集成在一起.当时做的时候,vuecli4正好出来了,前项目就是用的vuecli3.x,只是说这个项目加入进来的时候,还是vue2.x 其实很简单,多个项目多种配置,根据明确启动项目的命令,找到项目,按照项目的配置打包即可. 如何配置...
VUE+TS+WEBPACK框架的项目实践
热门推荐
码匠哥的技术博客
08-27 1万+
一、作者简介 WONDER专注于框架的研究，致力于提升效能，解放生产力。包括但不限于设计流程化，重构流程化，前端流程化，基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究（包括前端(vue为核心)，后端(thinkjs为核心)，终端(weex为核心、小程序为辅助)），目标以「技术引擎」的思想为业务侧提供强劲动力和生产力。 二、前言 很久以前在WOND
vue-cli脚手架构建工具,创建一个基于 webpack 模板的新项目
Als_zhangchangxiao的博客
11-10 1013
项目打包、优化、上线 前提: 1、备份 备份文件都叫backup 2、运行代码 2.1、npm run serve 测试项目能不能跑起来 2.2、npm run build 直接运行 进行压缩打包,会把dist干掉 2.3、打完包之后需要做的事 1. 运行代码 ...
gulp-single-file-components：一个Gulp插件，可让您构建单个文件组件（以Vue闻名）并通过将vue文件拆分为单独的文件在其他环境中使用它们
02-03
gulp-单个文件组件 一个Gulp插件，可让您构建单个文件组件（以Vue闻名）并通过将vue文件拆分为单独的文件在其他环境中使用它们。 先决条件 使用Gulp.js在Node 4.7.2+中工作。 介绍 我创建此代码的目的是为了改进我与Wordpress的模块以及当时使用的系统的工作方式，该过程非常漫长而复杂。 但是，这个插件让我大大简化了构建过程，然后组件被组装并包含在自定义库中。 由于我是为了满足个人需要而设计的，因此它不是很优雅，因此，它目前对包进行了猴子修补，并将其钩接到其编译器中。 如果事实证明除了我之外的其他人开始使用该程序包，我将来可能会做出适当的选择。 用法 变得如此简单：
Vue中抽离组件模板的几种方式
qq_33498329的博客
02-16 1143
1.全局组件和局部组件的创建 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></scr...
『精』Vue 组件如何模块化抽离Props
贤哲XianZhe的博客
11-04 1156
假如有这么一个用于签名的组件，能够控制画笔的大小、颜色、画布背景颜色宽高、按钮的文案提示等，那么它的属性必定是有十几个选项，假设 800 行代码里可能就得花费 100 行去声明这些属性，这明显是不合适的。从优化的角度上看，Vue 的Props声明方式都是一样的，同样的代码写多次显得有些冗余，那不妨将这些 Props 声明再次优化一下，编写一个公共的 Props 辅助工具进行声明。其实 ElementUI 的源码也是这么去做的，以 el-empty 组件为例，源码中对于属性的分离是这么写的。
webpack 代码拆分
weixin_33919950的博客
11-30 159
如果利用 webpack 将项目中的所有代码打包在一起，很多时候是不适用的，因为代码中有些东西我们总是希望将其拆分出来。比如： 样式表，希望利用 link 标签引入 使用概率较低的模块，希望后期需要的时候异步加载 框架代码，希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅读 webpack 的官方文档时候，记录的一些笔记，部分地...
如何做到两个维护
weixin_42598278的博客
02-07 107
更新的项目之间的同步？ 两个项目之间的同步可以通过多种方法实现。一种常见的方法是使用版本控制系统，例如Git。您可以将两个项目的代码存储在不同的分支中，并使用Git的合并功能来合并两个项目的更新。另一种方法是使用项目管理工具，例如JIRA或Asana，来跟踪项目的进展并确保两个项目保持同步。 ...
解决前端项目场景问题：vue如何组件化分离式编程（清晰易懂版）
意初的博客
10-27 694
组件就是将各个变化接近的结构都抽离出来，为了降低性能渲染，提高效率 1. components是放置各个组件的文件夹，homepage放置总vue文件，比如作者放的是CenterOverview.vue，主要看自己怎么命名。2.在CenterOverview.vue里import引入各个组件3.然后在html结构里面两种方法都可以直接调用比如 ，或者引入组件时命名的 作者用的第一种。5.至于组件的写法，就是普通的vue单页面写法，没有区别，数据、接口、样
Vue的内容抽离过程
m0_50848481的博客
05-07 370
1.初始阶段：在js代码中掺杂HTML import Vue from 'vue'; new Vue({ el: '#app', // Vue也是个组件，当el和template同时出现的时候，template中的代码会替代el挂载的DOM元素 template: ` <div> <button @click="btnclick">{{msg}}</button> </div> `, da
深入理解Vue组件二——父子组件间的传值
风里有诗句哈的博客
02-09 286
1.父组件向子组件传值 父组件中使用：conut=“1”传递给子组件，子组件中使用props接收count 父组件可以随意的向子组件传值，但子组件可以使用但不可以修改父组件传递过来的值，因为：conut=“1”中“：”表示的是单向数据流 但我们可以在子组件中重新克隆这个数据 2.子组件向父组件传值 子组件在方法中向外触发一个inc事件，并携带一个参数，父组件接收子组件的inc事件...
Vue3前端规范实践与简单示例
7. 路由管理规范：使用Vue Router管理路由，将路由配置抽离到一个单独的文件中，并且根据组件的层级结构来设计路由结构。 8. 单文件组件规范：遵循单文件组件的结构，包括、和三个部分，保持每个部分的清晰和组织性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值