这几篇文章是一个系列的。之前的文章在这里：1，第一节：搭建基础的webpack项目：2，第二节：在项目中引入eslint+prittier+husky:本文是第三节，配置化打包前端项目。项目代码每一节都在各自代码分支里。具体地址见文末。一，交互式打包1，为什么需要用户交互当我们打包前端项目的时候，有时需要用户做一些判断，配置打包的一些参数，于是就可以使用下面的方法，进行处理。例如分环境打包，我们之
转载
2023-12-05 14:13:07
50阅读
一、Vue介绍：渐进式JavaScript框架
渐进式框架：vue是一个生态，在核心功能的基础上，其他功能任意选用。核心：
声明式渲染：基于HTML拓展了一套模版语法，可以声明式地描述处HTML和JavaScript状态之间的关系响应式：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。虚拟DOM：js用对象的方式模拟真实dom。每次更新先作用到虚
转载
2023-11-10 20:49:08
72阅读
Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架（除非自己有前端开发团队），根据我经验找的几款web前端框架做出了分析。都是个人意见，仁者见仁智者见智。QUICK UI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。QU
转载
2023-11-13 16:19:09
69阅读
文章目录绘制项目架构图分析需求 绘制项目架构图分析需求主子应用功能:框架功能1.主应用注册子应用加载,渲染子应用路由匹配(activeWhen, rules-由框架判断)获取数据(公共依赖,通过数据做鉴权处理)通信(父子应用通信, 子父应用通信)2.子应用功能渲染页面监听通信(主应用传递过来的数据, 监听主应用传递来的数据进行更新)3.微前端框架子应用的注册开始内容(应用加载完成, )路由更新判
转载
2023-07-10 13:53:16
535阅读
1.项目概述1.功能模块电商后台管理系统大致可以分为以下几个功能模块：用户登录，退出登录用户管理权限管理
角色列表权限列表商品管理
商品列表分类列表参数管理订单管理数据管理2.开发模式采用的开发模式是前后端分离的开发模式。其中前端项目是基于Vue技术栈的SPA(单页面应用)项目。前端技术栈主要有：vuevue-routerElement-UIAxiosEcharts后端技术栈主要有：N
在现代前端开发中，CSS架构已成为一个不容忽视的话题。随着业务规模的扩大和复杂性的增加，前端开发团队面临着如何高效管理和维护CSS的问题。我的目标是记录我在解决“前端项目CSS架构”这一问题过程中的经验。
### 背景定位
在项目初期，我们面临着指导原则的缺乏，导致样式代码随意堆砌。这一现象严重影响了开发效率，带来了极大的技术痛点。为了应对这些挑战，我们开始系统化地思考CSS的管理策略。
我
一、介绍本文是基于 https://github.com/PanJiaChen/vue-admin-template 的模版进行搭建。在模板基础上的搭建过程中，提出以下可能遇到的问题：1、如何mock接口数据？大家都知道前后端开发速度不一定一致，有时候前端开发比较快，这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了，因此下面会简单以mock菜单为例子做演示。
转载
2024-10-25 08:37:14
47阅读
1、背景 1.1、项目规模： 前端项目的规模不同，成本收益比也会有所差别。通常来说，人员越多、项目复杂度越高，那么收益/成本的比值越大。 对
原创
2022-06-12 00:14:09
405阅读
前端模块化概述模块作为现代化编程的基础复用单元，在"搬砖"的日常工作中可以起到明显的加速作用。随着前端工程化的不断完善，模块将在前端扮演越来越重要的角色。 当前的模块系统大体分为iife、cjs、amd、umd、esm、systemiife(Immediately Invoked Function Expression)
即立即执行函数，是最早的模块编写方式，格式如下(function () {
转载
2024-02-02 07:15:43
83阅读
前端项目开发环境搭建1、nodeJS安装我是Mac用户所以使用的是homebrew安装的nodeJS安装的语句是 brew install node安装完成后运行node -v //查看node的版本，我的版本是v7.4.02、安装 flow、pcre、watchmanbrew install flow
brew install pcre
brew install watchm
转载
2023-11-16 21:27:54
42阅读
简介：前端选用VUE是因为它比较简单，容易上手，对于不熟悉前端的小伙伴很适合。对于软件发展来说，后端技术已趋于成熟和稳定，在功能已稳定的情况下，客户会把要求更多的放在页面的美观和合理排版布局上，学习一下前端，特别是自己设计一个页面，有助于对前端的了解和对美观设计的培养。一、搭建VUE项目1.搭建VUE基础框架1.1 安装node.js安装过程中记得勾选Add to path，安装完成后再cmd命令
转载
2023-11-16 21:28:03
70阅读
以前写业务，评审完，感觉需求理解得差不多就开撸，不怎么会做详细设计。大部分情况还好，遇到复杂交互，就歇菜了，组件写着写着，接口变动，得配合后端魔改，强行写一些逻辑，导致代码耦合严重。如果遇到开发工时较少的，那真的就是能跑就行，可维护性，可扩展，代码质量根本顾不上了。 为什么系统到后来改不动了，出现巨石屎山项目，没做好设计也是其中一个原因。所以，现在稍微复杂的页面，或者交互，我都会提前设计
转载
2023-07-24 22:38:36
676阅读
1.首先需要安装Node.js2.找到项目所在位置 2.生成如图所示文件‘node modules’就ok了 3.最后把这个项目拖拽到里面打开就可以了4.先运行到浏览器中会提示你有些插件没安装上如图所示 点击工具--》选择插件安装--》前往插件市场安装---》根据提示来安装相应的编译器插件 运行到小程序 &nbs
转载
2023-06-01 18:15:47
329阅读
开始的开始，前端项目很简单，html放外面，然后新建一个css和js文件夹，看起来很清晰。
随着时间推进，项目变大，问题开始一一出现了：html 太多，找起来麻烦css 和 js 需要压缩css 和 js需要发布到 CDN开始只简单依赖一个jQuery，后来发现依赖的插件越来越多，不好更新维护html 里面怎么实现公共一个头js和css包含大量重复代码，怎么重构项目前端如何把代码交付给后
转载
2024-01-05 14:31:13
32阅读
项目构建打包优化（通过speed-measure-webpack-plugin分析打包速度，使用BundleAnalyzerPlugin对打包结果进行分析）const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-
转载
2023-06-30 17:46:40
82阅读
校招阶段： 选择方向：选择方向：建议在大三第一个学期的时候就需要选择好方向，是选择就业还是考研，就业选择技术类方向，还是开发类，需要明确方向，有充足的准备，找工作的时候才不会很被动。都说十个程序员，八个是java，目前Java开发和前端开发仍然是市场的主流方向。 校招准备：前期入门：当选择前端方向之后，可以通过文档和b站的视频快速学习包括html，css，js，es6，vue（目前主流开发框架
转载
2023-12-11 17:47:19
91阅读
撰写日期：2020-07-23 撰稿人：彭成刚 转载需经本人同意。 Vue前端项目架构梳
原创
2022-08-29 23:19:36
1455阅读
每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题。我们有雅虎 14 条性能优化原则，还有两本很经典的性能优化指导书：《高性能网站建设指南》、《高性能网站建设进阶指南》。经验丰富的工程师对于前端性能优化方法耳濡目染，基本都能一一列举出来。这些性能优化原则大概是在 7 年前提出的，对于 web 性能优化至今都有非常重要的指导意义。然而，对于构建大型 web 应用的团队
# 前端项目架构讲解 案例
## 什么是前端项目架构
前端项目架构是指在开发前端应用程序时，将整个项目按照一定的规范和结构进行组织和管理的过程。一个好的前端项目架构可以提高开发效率、降低维护成本、保证代码的可维护性和可扩展性。
在前端项目架构中，通常包括项目目录结构、模块化开发、组件化开发、状态管理、代码规范等内容。下面我们通过一个案例来讲解前端项目架构的一些关键概念。
## 案例介绍
原创
2024-06-22 03:42:15
43阅读
## 大型项目前端架构
### 前言
随着互联网的快速发展，越来越多的大型项目开始采用前端架构来进行开发。前端架构不仅可以提高项目的开发效率，还可以提高项目的可维护性和可扩展性。本文将介绍大型项目前端架构的概念、特点以及应用场景，并通过代码示例来展示如何构建一个可靠的前端架构。
### 什么是前端架构？
前端架构是指在大型项目中，对前端代码进行组织、管理和扩展的一种方法论。它包括架构设计、
原创
2024-01-07 06:22:15
96阅读
