精华内容
下载资源
问答
  • 参考:https://segmentfault.com/a/1190000015424032一:根据不同的环境变量运行差异化不太大的不同...设置一变量在编译阶段,根据编译传入的变量不同,编译不同的组件修改package.json里的运行、打包命令(根据文...

    参考:https://segmentfault.com/a/1190000015424032

    一:根据不同的环境变量运行差异化不太大的不同项目

    1.安装cross-env包

    cross-env能跨平台地设置及使用环境变量

    npm install cross-env --save-dev

    2.设置一个变量 在编译阶段,根据编译传入的变量不同,编译不同的组件

    修改package.json里的运行、打包命令(根据文件名进行运行、打包)

    3.修改config下面的prod.env.js配置文件

    4.组件的拆分:把共用的组件拆分成一个一个的组件

    目录结构:

    5.根据项目的不同创建不同的文件

    每个文件里面进行组件的重组以及差异化的东西

    设置路由文件的时候根据环境变量引入

    二:路由模块化(根据路由文件配置的不同来决定哪个功能)

    例如一共有两个功能,停车功能、商场售票功能。有的商场两个功能都有,有的只有其中的一个

    把负责不同功能的路由写到两个文件中 shop.js park.js

    然后在router的index.js中进行整合

    根据功能的不同配置不同的routes

    注:只要import这个路由就算routes里面不配置npm run build打包之后打包文件里还是会有这个功能的代码  目前就只能使用功能的时候在import引入路由 避免打包进去不需要的代码 还没想到更好的实现方式

    原文:https://www.cnblogs.com/jamie-web/p/9983606.html

    展开全文
  • 主要介绍了详解vue移动端项目代码拆分记录,小编觉得挺不错的,现在分享给大家,也给大家做参考。一起跟随小编过来看看吧
  • 在笔者所在的前端开发团队中,采用前后端分离方案是在整个业务线稳定后进行的。业务前期主要采用后端套模板的方式,现阶段是采用基于Vue的...(项目指根据新需求创建的项目代码,工程指一套代码下包含多个项目。后...

    在笔者所在的前端开发团队中,采用前后端分离方案是在整个业务线稳定后进行的。业务前期主要采用后端套模板的方式,现阶段是采用基于Vue的单页开发模式。

    这会出现一种情形,产品在不断迭代过程中,由于之前线上前端代码并非工程化项目,后面新需求多是另起Vue项目来进行编码上线,前端在整个业务线上没有统一的工程,项目过多分布散乱并且不易优化管理。(项目指根据新需求创建的项目代码,工程指一套代码下包含多个项目。后文以此约定。)针对这种情况下我们做出一些尝试,将目前存在的多个项目整合成一个工程,统一入口。

    当然我们更希望整合成统一工程后可以实现后续新需求接入无痛化。下文则主要围绕项目整合过程中遇到的些许问题,分享一些可行解决方案。简要从几个方向,代码层级化分、组件处理、路由处理、数据状态维护、其他优化等来简述。

    1. 代码层级划分

    如何合理划分整个工程目录?

    在前端开发中我们首先会面对如何将代码及静态资源划分目录层级放置问题。比如在前端洪荒时代通常会以img、css、js命名不同目录。那么在结合Vue相关技术栈以及多项目整合场景下,如何划分目录才能保证代码层次合理呢?

    谈到这个问题的时候,我们可以首先思考下整个工程具体需要哪些相关功能。在抛开具体源码内部结构情况下,主要有构建脚本、构建配置、Mock数据、项目文档、项目源码等。在不结合具体技术栈的情况下,这也是前端在工程化方面大致目录。

    具体到项目源码内部目录结构,按照不同功能模块,主要做了以下层次划分:

    静态资源按项目拆分目录

    路由组件按项目拆分目录

    子组件按项目及所属父路由组件拆分目录

    路由层按项目拆分不同文件

    数据层按项目拆分不同目录

    mixins混合代码拆分不同文件

    配置层按项目拆分不同文件

    以项目src源码下组件相关目录为例,如下图所示:

    ├── pages // 路由组件目录

    │   ├── README.md

    │   ├── base // 全局基础路由组件目录

    │   │   └── SuccessPage.vue

    │   ├── period_process // 项目A路由级别组件目录

    │   │   ├── ChooseTime.vue // 项目A选择时间路由组件

    │   │   ├── xxx

    │   └── period_suborder // 项目B路由级别组件目录

    │   └── xxx

    |

    ├── components // 子组件目录

    │   ├── README.md

    │   ├── base // 全局基础子组件目录

    │   │   ├── AddressInfo.vue

    │   │   └── xxx

    │   ├── period_process // 项目A子组件目录

    │   │   ├── base // 项目基础A子组件目录

    │   │   │   ├── Picker.vue

    │   │   │   └── xxx

    │   │   ├── choose_time // 项目A选择时间路由组件子组件目录

    │   │   │   ├── Cleaner.vue

    │   │   │   └── xxx

    │   │   ├── xxx

    │   └── period_suborder // 项目B子组件目录

    │   └── xxx

    复制代码

    当然项目目录结构不是一层不变的,可根据业务场景及技术栈灵活处理。但原则上避免一个文件从头写到尾出现绵长代码情况,造成后续迭代可阅读性差、不好维护问题。良好的代码层次可以简述为将相同功能模块聚合同一目录并拆分出独立文件。

    2. 组件维护相关

    如何控制组件拆分粒度?

    谈及组件部分,组件拆分粒度永远是一个绕不开的话题。首先大的方面分为路由组件(页面组件)和相应页面子组件。路由组件为配置路由时组件,组件内部拆分不同子组件进行引用。路由组件及子组件分别拆分相应业务组件和基础组件。

    页面组件拆分过程中,我们采用将相关功能模块代码拆分为子组件。将页面划分若干子组件(功能模块),每个子组件完成一个子功能。如下图所示:

    如何方便业务组件提升为基础组件?

    在组件划分时,我们将子组件拆分业务组件和基础组件。在项目整合的过程中,遇到业务子组件因被后续多个项目使用需要提升为基础组件情况。但起初编码过程中仅考虑作为业务子组件,内部数据源多依赖Vuex,在将其提升为基础组件时需要做大量工作将数据来源改为props对象,修改数据源操作改为emit触发事件机制。

    这里更好的处理方式则是希望在编写子组件时,内部数据源尽可能依赖于父组件传递的props对象。将需要修改数据源行为通过emit方式提升至父组件内操作。

    3. 路由相关处理

    如何处理多入口路由配置?

    单页web应用在处理不同view时提出前端router概念。对应单一项目需求时,我们可以很从容设置默认路由入口来解决。但是对于多入口的多项目工程,则需要一些思量。同时由于笔者所处公司APP在处理URL跳转时默认不带hash,那么在URL访问上则没有办法通过附加hash路由来跳转相应视图。

    我们采用的解决方式是,在URl访问时不携带hash,后端同学会在不同项目的入口html文件中放置PAGE_TYPE变量,前端根据PAGE_TYPE变量跳转相应路由组件。PAGE_TYPE变量对应于当前待访问的路由。通过结合后端在页面中渲染的路由标志量,解决访问时路径问题。

    在此基础上,还需要考虑页面刷新以及跳转外链后退情况。在非入口路由页面刷新会根据PAGE_TYPE变量重置进入入口路由页。这种情况需要判断当前URL是否存在hash路由标志,优先获取当前链接hash值进行跳转。具体伪代码如下所示:

    let routeType = window.PAGE_TYPE // 获取初始化路由变量

    let routeName = getHashRouter() // 获取当前路由名称

    if (routeName) {

    router.push({path: `/${routeName}`})

    } else {

    switch (parseInt(routeType)) {

    case 0:

    router.push({path: '/index'})

    break

    case 1:

    router.push({path: '/projectB'})

    break

    default:

    router.push({path: '/index'}) // 默认路由入口

    }

    }

    复制代码

    如何优化异步组件加载?

    另外一个值得考虑的问题是,随着项目不断增加在打包构建应用时,js文件会变得越来越大,影响页面加载速度。将非入口路由组件异步加载是一种比较高效的解决方案。结合Vue的异步组件和Webpack的代码分割(code splitting)特性可以轻松实现路由组件懒加载。具体语法可参考vue-router官方文档。

    非入口路由组件异步加载,可减少首次加载JS文件大小。但随之而来的问题是,假如用户选择点击按钮进行路由跳转时,需要异步获取JS文件,等待异步组件加载完成后再跳转。特别在跳转之前还需要异步调用接口校验,用户等待时间无疑增加。我们更希望可以在用户空闲时间预加载后续跳转的异步组件。

    具体预加载操作可以在组件生命周期mounted中手动触发后续异步组件加载。还可将预加载操作聚合成mixin文件,注册成全局mixin。埋点数据显示后续路由组件跳转时间约在300ms左右,属于秒开范围。示例如下:

    mounted () {

    // 预加载后续异步路由组件

    import(/* webpackChunkName: 'chooseTime' */ '@/pages/period_process/ChooseTime.vue')

    // 或使用 webpack 特定的 require.ensure 语法

    // require.ensure(['@/pages/period_process/ChooseTime.vue'], null, 'chooseTime')

    }

    复制代码

    将非入口路由组件异步加载,并在用户空闲时间实现预加载接下来路由组件。降低用户等待时间,用户体验自然也就更好。

    如何优雅处理路由跳转效果?

    这里说到的路由跳转效果指在不同路由组件跳转时所添加的过渡效果。Vue默认的router-view跳转不存在动效,略感生硬。为router-view添加transition是不错的选择。

    不过在处理transition过程中,起初是将过渡效果添加至路由组件根节点上,但在某些安卓机型下跳转会出现明显的闪屏现象。解决方式是将transition组件移至router-view组件外统一处理。

    4. 数据状态维护

    如何维护项目中的数据状态?

    可以预料到的数据交互行为主要有:

    父子组件数据共享

    兄弟组件数据共享

    用户行为数据存储

    后端接口数据缓存

    另外还希望所有数据层model和异步接口可以抽取进行统一维护,为此我们引入了Vuex。

    Vuex为Vue应用程序的状态管理模式,采用集中式存储管理应用的所有组件状态。未引入Vuex下常见的问题多个视图依赖与同一状态,多个视图需要变更同一状态。两种情形下多通过组件间参数传递或采用事件同步状态。引入Vuex后,将组件共享状态抽取成单例模式管理。定义并约定遵守一定的状态管理的规则,代码结构化更清晰更容易维护。当然如果不开发复杂单页应用,使用Vuex可能是繁琐冗余。

    除此我们还需要考虑的是,由于Vuex数据状态是存储在JS变量中的,当页面刷新时整个应用状态会全部丢失。需要在state、mutations读取、存储中添加本地持久化操作。封装本地持久化存储层Cache.js,可选sessionStorage、localStorage、indexedDB存储方式。依据业务情形在mutations文件中选择相应方式做本地持久化操作。

    Vuex + Cache方式做数据状态维护,并将相应代码拆分独立数据层,减少与业务代码耦合程度。业务流程中只需要通过mapState、mapActions方式获取相应数据状态或更新相应数据状态。

    如何保证多项目中数据状态不被污染?

    多项目整合在一起,各个项目中state难免会出现变量名称冲突,多个状态变量相互污染现象。同时actions、mutations操作也都暴露在全局状态下。随着项目不断整合加入,这将会成为一个定时炸弹。

    很开森的是Vuex有相应的解决方案。Vuex中提出模块(module)和命名空间(namespace)概念。Vuex允许我们将store分割成模块,并且可通过添加namespaced: true将其变为命名空间模块。多个项目使用各自state对象,数据耦合程度及被污染的可能性降低。

    结合Vuex还可以做哪些好玩的事情?

    按照Vuex所约定数据状态存储以及修改的规则,很容易将数据层按照相应层次拆分出来。这时异步请求则可以进行统一聚合,封装成全局状态下的fetchDataaction方法,在统一的异步请求中我们做了以下工作:

    防止重复提交

    网络异常统一处理

    缓存接口数据(可选)

    自动处理接口返回数据code不为0情况(可选)

    接口请求时间过长显示loading状态(可选)

    自动上报接口请求时间(可选)

    如此下来,我们业务组件不再需要考虑异步请求中的重复提交、网络异常等事情。单Vue文件组件中中仅聚焦业程逻辑的实现。

    5. 其他优化

    如何拆分组件中与业务无关逻辑代码?

    解释下,这里无关逻辑是指与业务关联性密切性不大的代码。比如,前端做router跳转不同视图时,需要考虑跳转到相应视图下设置当前视图的页面title或发送当前视图的pv埋点。每个路由级别组件几乎都会写类似于这些与业务逻辑无关的代码。那么如何提取拆分呢?

    这里提一个混合(mixin)概念,mixin是一种分发组件中可复用功能的灵活方式。通过mixins或Vue.mixin()语法接受一个混合对象或混合对象数组。混合对象可以包含任意组件选项,另外同名钩子函数将混合为数组,混合对象的钩子将在组件钩子前调用。

    结合Vue中的mixin语法,我们可以很容易做到将基础与业务无关代码拆分成不同mixin文件,通过Vue.mixin()注册为全局混合对象。在不同mixin文件编写相应的组件生命周期函数做预加载组件、设置页面title、发送PV等操作。

    如何将雪碧图区分项目进行合并?

    一言简述之,在我们整合项目过程中发现之前的构建脚本在处理雪碧图合并的过程中将多个项目图片合并成一张。这就会出现用户访问项目A过程中,会将整个工程的雪碧图资源下载,占用流量并造成资源浪费。那如何分项目合并雪碧图呢?

    这里我们使用webpack-spritesmith模块做雪碧图合并。通过实例化webpack-spritesmith对象,传递自定义模板,分别构建出css、scss文件(具体可参考官方文档)。其实分项目构建不同雪碧图与webpack构建多个html页面做法类似。在webpack的plugins配置数组中push多个webpack-spritesmith实例,不同实例分别构建不同项目下的雪碧图。这时不同项目业务组件便可分别引用相应的雪碧图样式文件。

    总结

    将多个相关需求的项目整合到单一工程的过程中,从前期详细设计到后面多个项目接入上线,一直在踩坑填坑。本文也是针对一些我们遇到的比较典型的问题拿出来分享。

    在前端越来越追求工程化的今天,如何在工程化的基础上将项目做到层次清晰、代码简洁、耦合更低、性能更优则是我们要去思考的方向。

    最后本文主要聚焦于基于Vue的多个相关项目整合统一工程实践解决方案。

    仓促成文,如有错误,措辞不当,敬请斧正 :)

    展开全文
  • 记一次 Vue 项目重构

    2020-12-30 05:44:54
    经过对项目分析,主要存在以下问题:全局样式满天飞组件越来越,管理不方便核心页面 1300 多行代码,阅读性非常差本项目是一金融类项目,采用可视化的资产架构描述方式,并根据资产架构生成税务报告。使用 Vue ...

    随着公司项目越做越复杂,因前期团队对 Vue 使用经验不足,导致留下比较多坑。再这样下去项目会变成越来越难以维护,于是我对主管说:“主管,我想重构”,便有了这次的重构经历。经过对项目分析,主要存在以下问题:

    全局样式满天飞

    组件越来越多,管理不方便

    核心页面 1300 多行代码,阅读性非常差

    本项目是一个金融类项目,采用可视化的资产架构描述方式,并根据资产架构生成税务报告。使用 Vue 全家桶进行业务开发,并在 Element UI 基础上进行定制化,可视化建模使用 mxGraph

    减少全局样式

    项目出现全局样式满天飞的情况,有以下原因

    组件内样式想要覆写子组件样式,去除了 scoped 关键字

    为了样式在不同组件间复用,将样式提到了全局

    组件销毁后,Vue是不会删除对应样式标签的,所以组件内样式不写 scoped 存在污染全局样式的风险。

    为了解决第一个问题,这次重构的做法是,坚决所有组件都使用 scoped。需要覆写子组件时使用深度作用选择器解决。这样仅不会污染全局样式,还对子组件覆写样式一目了然。

    对于弹窗这类确实要作用到全局的样式,我们统一写在命名为 global.scss 的文件,并使用 BEM 规范命名。

    对于在组件间复用的样式,分模块地放到 modules 文件夹下,组件内使用时再用 @import 导入。

    来看看重构后的 style 文件夹长这个样子

    全局样式样式只剩下 nomalize.css、一些自定义的 reset、element-ui 的默认样式、上文提到的 global,还有就是图标。

    分类管理组件

    未重构前,全局基础组件放置在 components/common 文件夹,业务组件与其他未归类的组件全放在 components 文件下,看起来非常混乱。

    经重构后,将组件分为五类: business、common、function、slot,还有一种就是为某个页面特定提供的,下面会提到。

    business 为业务组件跟业务有耦合,可在页面间复用,但不适用于其他项目。而 slot、function、common 这几类是可脱离当前项目使用的。 slot、function 与 common 一样,不同的是 common 使用频率非常高是全局注册的。而 slot、function 是局部注册使用的。slot 的特别之处在于,这类组件只提供一个样式外壳,无太多交互,能很好地被其他组件利用。

    像下图所示其他 Panel 组件都可以复用 slot目录下的 Panel 组件。

    这次重构经我总结后得出应该在这两种情况下创建组件

    可复用的,如上面提到 components 目录下的组件

    不可复用的,纯粹为了减少某个页面代码,使 template 结构更清晰。

    例如仅仅是传入 props 做数据展示

    又或者该组件直接与页面进行交互,该组件无嵌套其他组件

    像下面 NodeDetai 页面分离出来的 components 就是上面提到的不可复用组件。

    拆分大文件

    我们系统核心页面就是画图页。该页面共三个组件,左侧的元素面板、右侧的节点面板、右侧的线条面板。交互与大多可视化建模软件相同,用户将左侧元素拖拽到画布,从节点拖出线条连接到另一个节点,当用户在画布上选择节点时右侧面板显示节点相关操作,选择线条亦然(同一时刻只能选择一个节点或者一条线条)。与 draw.io 有点相似,但我们做的不是绘图应用。

    精简 methods

    经过我对该页面代码进行浏览后发现,该页面之所有这么多代码是因为,在编写方法过程中我们会习惯性地将大的方法拆分成小的方法,结果这些小的方法都堆在 methods,导致 template 事件处理函数非常不显眼。所以这次重构目标就是删除 methods 对象中除页面初始化方法外的所有非事件处理方法。也就是说 methods 对象中的每个方法都应该对应一个 template 事件处理。

    那么问题来了拆分出来的小方法不放在 methods ,该放到什么地方?根据我对画布页面代码分析,发现这个页面其实只对有三个东西进行操作:架构、节点、线条。于是按照这个思路独立出有三个 js 文件,将 this 当作参数传入到各自的模块,用来操作 vm 对象。同时将 js 从 vue 文件中独立出来。重构之后该页面目录长成了这个样子

    js/index.js 是页面的 vm 对象,重构后代码由原来的1000多行精简成了300多行,提高了可维护性。

    使用面向接口编程

    这个页面js还存在一个问题,大量的 if/else 判断。这里先扯一点 mxGraph 的东西,在 mxGraph 中节点与线条都统称为 Cell,当节点或线条被删除时 mxGraph 会派发一个 CELL_REMOVE 事件,但是这个 Cell 是节点还是线条还是要程序员自己去判断的,这也导致了我们系统出现了很多下面这样的判断语句

    functoin syncRemove(cell) {

    // 判断是节点还是线条

    const cellIsVertex = cell.vertex;

    if(cellIsVertex){

    // 执行删除节点

    } else {

    // 执行删除线条

    }

    }

    经过我思考许久后得出两个方案

    对 mxGraph 的每个 Cell 事件进行细分成节点与线条事件。比如接收到 CELL_REMOVE 事件后,判断是节点还是线条然后触发自定义事件 VERTEX_REMOVE 或者 EDGE_REMOVE,之后我们只需监听 VERTEX_XXX 与 EDGE_XXX 即。这样做虽然让事件变得更加具体清晰,但是在细分过程中同样不可避免写出多个 if/else 判断是节点还是线条,于是弃用了这个方案。

    使用面向接口编程。上文提到我将该页面的交互分成有三个模块:节点、线条、架构,既然节点、线条有相同的操作,那么他们应该实现共同的接口。于是乎将代码改造成这样子

    // vertexOp.js

    const vertexOp = {

    // *********

    // Interface

    // *********

    handleActive(vertex) {

    // 节点被点出时该执行的操作

    },

    async syncAdd(vertex) {},

    syncRemove(vertex) {},

    // Others ....

    }

    // edgeOp.js

    const edgeOp = {

    // *********

    // Interface

    // *********

    handleActive(edge) {},

    async syncAdd(edge) {},

    syncRemove(edge) {},

    // Others ....

    }

    当用户选择不同 Cell 的时候,只需要在选择事件处理器中做一次判断即可。

    // index.js

    let opContex = null;

    let activeCell = null;

    const listenSelectionChange = ()=> {

    activeCell = graph.getSelectionCell();

    const cellIsVertex = activeCell.vertex;

    if(cellIsVertex){

    opContex = vertexOp;

    } else {

    opContex = edgeOp;

    }

    }

    const handleRemoveEvent = ()=> {

    contexOp.syncRemove(activeCell);

    }

    使用请求拦截将零碎的方法调用集中起来

    这个页面再一个问题是,出现这多零散的方法调用。比如像下面的需求

    需求:当用户做了任何改变架构外观的操作都将当前架构截图同步到服务端用作该架构的封面展示。

    重构前做法:

    添加节点,在相应处理方法最后加一句截图发送请求

    修改节点信息,在相应处理方法最后加一句截图发送请求

    移动节点,在相应处理方法最后加一句截图发送请求

    添加线条,在相应处理方法最后加一句截图发送请求

    修改线条信息,在相应处理方法最后加一句截图发送请求

    ........ 在相应处理方法最后加一句截图发送请求

    重构后做法:拦截全局请求,判断到是相关操作的请求则截图发请求

    具体做法是对请求进行命名,然后在每个请求发送完成时使用全局 eventBus 发送一个请求完成事件。事件处理器只需要根据请求名称判断是否需要截图发送请求。代码思路如下

    // api层

    // api/nodes.js

    import http from '@/config/axios/index';

    export default {

    all: data => http('/nodes', data, 'GET'),

    one: id => http(`/nodes/${id}`, 'GET'),

    save: data => http('/nodes', data, 'POST', 'nodes-save'),

    del: id => http(`/nodes/${id}`, 'DELETE', 'nodes-del'),

    // .....

    };

    // 封装 axios

    // config/axios/index.js

    export default function (...args) {

    const url = args[0];

    let data;

    let method;

    let name;

    // 参数重载

    if (args.length === 2) {

    method = args[1];

    } else if (args.length === 3) {

    if (_.isString(args[1]) && _.isString(args[2])) {

    method = args[1];

    name = args[2];

    } else {

    data = args[1];

    method = args[2];

    }

    } else if (args.length === 4) {

    data = args[1];

    method = args[2];

    name = args[3];

    } else {

    throw new Error('http support max 4 args');

    }

    if (_.isNil(name)) {

    // 没有命名的请求,默认命名为当前时间戳

    name = String(Date.now());

    } else {

    // 有命名的请求,为了保证请求的唯一性,加上时间戳后缀

    name = `${name}__${Date.now()}`;

    }

    return $axios({ url, data, method }, name);

    }

    async function $axios(initialOptions, requestName) {

    const options = getOptions(initialOptions);

    initialOptions.requestName = requestName;

    requestManager.addReq({

    name: requestName,

    config: initialOptions,

    });

    try {

    const response = await axios(options);

    requestManager.popReq({

    name: requestName,

    response,

    });

    return response.data;

    } catch (error) {

    // 保证即便请求出错也要使该请求弹出队列

    requestManager.popReq({

    name: requestName,

    error,

    });

    return {};

    }

    }

    // 发送请求相关事件

    // requestManager.js

    import Vue from 'vue';

    const $bus = Vue.prototype.$bus;

    class RequestManager {

    constructor() {

    this._updateRequests = [];

    }

    addReq(req) {

    if (req.config.method.toLowerCase() === 'get') {

    return;

    }

    this._updateRequests.push(req);

    $bus.$emit('before-modify-req-send', req);

    }

    popReq({ name, response }) {

    if (response && response.config.method.toLowerCase() === 'get') {

    return;

    }

    const idx = this._updateRequests.findIndex(item => item.name === name);

    if (idx >= 0) {

    this._updateRequests.splice(idx, 1);

    $bus.$emit('modify-req-finished', name, response);

    if (this._updateRequests.length === 0) {

    $bus.$emit('modify-req-empty');

    }

    }

    }

    }

    // RequestManager是一个全局的单例对象

    export default new RequestManager();

    最终只需要对请求进行拦截,就可以大量减少零散的方法调用

    // xxx.vue

    this.$bus.$on('modify-req-finished', (name, response) => {

    const reqs = ['c-transitions-updateRatio',

    'c-transitions-save',

    'c-transitions-del',

    /*..........*/];

    const reqName = name.split('__')[0];

    if (reqs.includes(reqName)) {

    // 截图,发送请求

    }

    });

    除此之外请求拦截还适用于这个场景: 当用户做了操作,实时提示用户操作保存中,保存完成后提示用户操作已保存。

    使用请求拦截非常轻松完成这个功能,只需要监听发送请求事件、请求队列清空事件做相应提示即可。

    总结

    这次重构一人完成,用时一星期,做了如下工作

    使用划分模块的方式减少全局样式

    归类组件

    使用如下方式拆分大文件

    精简 methods

    拆分模块

    使用面向接口编程

    使用请求拦截

    感悟比较深的是,网上虽然很多文章教你怎样用 Vue 做好项目,但实际情况还是要从项目自身出发,自己一定要对项目进行思考,我相信没有适合所有项目的 "Vue最佳实践"。只要不断对项目进行思考、改进,才能找到最适合自身项目的架构方式。

    展开全文
  • 所以按业务,就需要划分为多个路由文件 index.js 的代码: import Vue from 'vue' import VueRouter from 'vue-router' // 引入其他路由文件 import ManagementRoutes from '@/router/management' import ...

    对于稍微复杂点的项目,所有路由都混在一个页面,看着也很混乱,不清晰。
    所以按业务,就需要划分为多个路由文件

     index.js 的代码:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 引入其他路由文件
    import ManagementRoutes from '@/router/management'
    import ServiceRoutes from '@/router/service'
    
    const baseRoutes = [
      { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }
    ]
    
    const routes = baseRoutes.concat(ManagementRoutes, ServiceRoutes)
    
    Vue.use(VueRouter)
    
    const router = new VueRouter({
      // mode: 'history',
      routes
    })
    
    
    export default router
    

    其他文件代码:
     

    /*
     * @Author: Jonathan
     * @Date: 2021-09-16 14:26:05
     * @LastEditors: Jonathan
     * @LastEditTime: 2021-11-03 10:34:43
     * @Descripttion:后台路由
     * @FilePath: \simplify-fkyun-ui\src\router\management.js
     * @version:1.0.0
     */
    import AppManage from '@/views/management/applicationManage/AppManage.vue'
    
    const routes = [
      {
        path: '/',
        name: 'Main',
        component: () => import('@/views/Main.vue'),
        redirect: '/home', // 将Main主页到重定向到路由home页(就是访问Main其实是访问home)
        children: [
          // { path: '/home', name: 'Home', component: () => import('../views/service/bigscreenInfo/BigScreenConfig.vue') }, // Home是Main子路由
          { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }, // Home是Main子路由
          // 应用管理-应用主页
          { path: 'management/applicationManage/appManage', name: 'AppManage', component: AppManage }
        ]
      }
    ]
    
    export default routes
    

    展开全文
  • 由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码,随着两产品功能的差异越来越大,代码的冗余度和偶合度越来越高,为了便于后期维护以及添加新功能,所以基于原来的项目代码,进行了代码结构拆分。...
  • 本篇文章给大家分享了关于Vue多系统切换实现的解决方案,对此有需要的朋友可以跟着参考学习下。
  • 本文为大家分享了vue如何搭建多页面多系统应用,供大家参考,具体内容如下 一、多页面多系统应用 ...在做Vue项目的时候,需要用对多个类似系统做一个集成。想过很多种方法,比如:完全单页应用,分开独立应用,
  • 主要介绍了基于vue-cli搭建模块且各模块独立打包的项目,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue的轮播组件,同时显示多个轮播项目。 2.x作为最新版本仅支持vue 3,vue 2应该使用1.x版本。 浏览器兼容性 现代浏览器,遵循vue 3兼容性。 > 1% last 2 versions not ie 11 not dead 组件结构 在使用<split> ,...
  • vue大组件拆分的思考

    千次阅读 2020-07-22 15:33:16
    组件化的vue给人的印象往往是快而小,简洁明了,但随着业务量和判断逻辑的堆叠产生,可能也会诞生一些很大的组件。 一组件的HTML的代码量超过200行应该就算很大的组件了,今天对一超过400行的组件如何进行优化来...
  • 主要介绍了vue路由分文件拆分管理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 现在有这样一数组,后端给的, policyDtos: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'}, {clazzType: 2, clazzTypeText: '限售', remark: '限售', sourceTy
  • 主要给大家介绍了关于多个vue子路由文件自动化合并的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 在开发项目过程中,在项目过于庞大,路由信息非常的情况下,如果将路由配置信息都放在一文件里面,那么这JS是不方便维护的,那么,这时候需要我们把这庞大的路由文件,根据项目功能分类,拆分为几不同的...
  • 关于vue多个项目的管理

    千次阅读 2019-10-11 17:52:04
    在一个vue的服务中管理多个项目,各项目的功能模块相对独立,但公共部分可以提取为公共组件,并在多个项目之间进行调用 实现方法: 一、项目结构: 在src文件夹下创建各项目的文件夹,并在项目文件夹中创建assets、...
  • 你可以使用 vue 组件方法,將应用拆分成小型组件,组件可以在整个应用中重用。随着应用的增长,问题接踵而至,此时需要更好的结构管理应用。下面是我在编写大型 vue.js 应用时用的应用组织结构。项目...
  • 背景 需求:pc端可以编辑保存在移动端上显示的界面,pc端上可以...现在打算做一套公用组件,给两端使用,但是又不想在git上维护3个项目(3个项目包括:pc,移动,共用组件),因此有了本文:Vue多项目共用组件,并且
  • 主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的,现在分享给大家,也给大家做参考。一起跟随小编过来看看吧
  • 背景在vue项目中,我们是将整个项目打包到一dist目录下,但是在实际开发中,当项目足够庞大时(一级路由几十,二级路由上百),我们仅仅改一小的BUG,比如说改了某个地方的一按钮边框颜色,但是要发到线上的...
  • vue多项目多模块打包

    2021-09-22 14:45:29
    vue多项目多模块打包 vue-cli4 为例,实现多项目的分...所谓分模块打包,一模块就是一独立项目,各个模块可以配置独立的文件。 首先,新增目录:models、template,一存放模块文件,一存放模块模板。 分别在
  • Here is my vue layout:.row.col-4(v-for="article in articles") // need to render 1-3 items here| {{ article.name }}.row.col-4(v-for="article in articles") // need to render 4-6 items here| {{ article.n...
  • 所以,想把 vue 路由也按功能,类似 laralel 一样,划分为多个路由文件,最终的路由结构类似下面: routes/ index.js account.js student.js business.js ... 也可以是更深层次的嵌套 school/...
  • 前言:使用脚手架创建的vue项目工程默认是属于单页面单入口的,有时根据开发需要,经常要求将传统的单入口页面改成入口页面的项目,其实脚手架3创建的vue项目,官方提供了一叫pages的对象,我们可以自行创建一...
  • 项目需要,本来单页面的项目,要改成入口页面,打包之后也是页面,这就需要改造项目结构下面我们开始:项目vue-cli3.0需要改变的东西,先列出来1.src目录结构2.vue.config.js配置3.页面间的图片,scss,main....
  • vue 路由拆分

    2020-08-19 16:27:36
    随着项目越来越大,路由会越来越,如果路由都写在同一文件中会显得页面混乱,可读性很差,不易查找维护。 2. 解决方法 拆分路由: 在 router 文件夹中创建新的文件 shoppingMallBusiness.js 文件 里面还按照...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,698
精华内容 5,479
关键字:

vue拆分成多个项目

vue 订阅