0. 路由懒加载 路由组件不使用直接引入，而是匿名函数返回形式，如下注释可以定义编译后的js文件名，在未进入该路由时此js文件的内容将不会被请求到
原创
2022-09-26 10:41:36
172阅读
1.项目概述1.功能模块电商后台管理系统大致可以分为以下几个功能模块：用户登录，退出登录用户管理权限管理
角色列表权限列表商品管理
商品列表分类列表参数管理订单管理数据管理2.开发模式采用的开发模式是前后端分离的开发模式。其中前端项目是基于Vue技术栈的SPA(单页面应用)项目。前端技术栈主要有：vuevue-routerElement-UIAxiosEcharts后端技术栈主要有：N
满怀欣喜的开发vue项目，快要完成的时候，测试人员发现在app中首次加载慢的跟便秘一样，无奈要优化，于是开始各种找办法！
原创
2021-07-29 13:51:45
428阅读
一，本文分为两部分普通项目优化vue项目优化防止XSS与XSRF（安全性）二，普通项目优化:页面加载阶段页面渲染阶段一、 页面加载dns预解析使用cdn静态资源的压缩与合并减少https请求异步加载defer，async服务端渲染ssr多使用内存和缓存二、 页面渲染css放前面，js放后面减少dom查询，多次使用的保存为变量减少dom操作，统一通过dom片段操作事件函数的节流和防抖图片懒加载尽早进
转载
2024-05-08 12:56:56
20阅读
项目构建打包优化（通过speed-measure-webpack-plugin分析打包速度，使用BundleAnalyzerPlugin对打包结果进行分析）const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-
转载
2023-06-30 17:46:40
82阅读
通过nprogress添加进度条效果安装nprogress插件：依赖 》安装依赖 》运行依赖，搜索nprogress，安装配置progress在axios.js中引入
原创
2022-10-11 16:46:37
263阅读
粒子特效： vue-particles nprogress 网页加载进度条 全局前置守卫 NProgress.start() 全局后置守卫 ：NProgress.done() 页面loding 单个页面加loading、阻止重复点击 通过element-ui的 Loading 加载（用户体验度最高的 ...
转载
2021-11-02 21:25:00
133阅读
2评论
一， 使用Vue脚手架1.1. 使用脚手架创建模板项目1) vue-cli是vue官方提供的脚手架工具 command line interface 2) 最新的版本是4,3)  
转载
2023-11-02 10:03:06
57阅读
前端优化方法有哪些 文章目录前端优化方法有哪些前言一、http方面尽量减少http请求，合理设置http缓存1.开启 HTTP/2请求与响应复用标头压缩2.DNS-prefetchPreconnect二、资源优化预加载Preloadjs方面加载优化CSS方面图片方面三、组件渲染方面的优化 前言前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源
转载
2024-05-15 03:01:48
71阅读
1、路由懒加载，这个基本上每个项目必须。 2、Ui框架按需引入，也就是要用哪些组件引入哪些组件 3、关闭Map文件的生成，没关闭的vue项目打包后就会有很多的.map文件。这些文件主要是帮助我们线上调试代码，查看样式。脚手架2是在index.js。脚手架3就vue.config.js里面。将productionSourceMap 改为false。 4、使用cdnweb
转载
2023-12-20 01:05:01
42阅读
vue + webpack 前端性能优化背景对于程序开发者而言，开发一个项目不仅仅注重效率和功能
原创
2022-03-29 09:51:59
872阅读
前言 一个umijs项目,打包后发现体积过大,想优化, 看到各种博客上的优化手段是基于webpack的,于是我花了几天把项目转成webpack5的, 优化打包后比原来还大.... 最终还是在原来的umijs基础上进行了优化. 打包分析 umi项目在package.json加一个脚本语句 "analy ...
转载
2021-10-26 16:54:00
1235阅读
2评论
一点点不成熟的web优化思路： 项目优化可以从代码 + 用户体验两个角度来考虑，代码层面优化好了更方便维护和保护同事头发，体验层面优化好了效果就不用多说了 一.代码层面优化 1）变量、标签、方法名应见名知意，并优化精简DOM结构 2）重复代码应实现封装调用以降低模块的耦合度 3）重要节点添加注释 4 ...
转载
2021-08-24 17:23:00
139阅读
2评论
一、介绍本文是基于 https://github.com/PanJiaChen/vue-admin-template 的模版进行搭建。在模板基础上的搭建过程中，提出以下可能遇到的问题：1、如何mock接口数据？大家都知道前后端开发速度不一定一致，有时候前端开发比较快，这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了，因此下面会简单以mock菜单为例子做演示。
转载
2024-10-25 08:37:14
49阅读
一、基本介绍 1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。 3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。 二、前端的MVVM 1、前端视
转载
2024-10-16 15:47:07
53阅读
# Vue前端项目Docker化部署指南
在现代Web开发中，Docker已经成为一种绝佳工具，它使得应用的构建、部署和版本管理变得更加简单和高效。本文将介绍如何将一个Vue前端项目通过Docker进行部署，以及所需的相关配置和代码示例。
## 什么是Docker？
Docker是一个开源的应用容器引擎，它允许开发者将应用程序及其依赖项打包到一个独立的容器中。这种方式确保了应用在任何环境下都
项目工作开始从配置文件开始实前端决定的东西也挺多的从组件化开始，抽离封装，基于ui组件库二次封
原创
2022-08-19 11:38:23
132阅读
安装完Vue3.0 后 使用命令 vue ui然后浏览器访问localhost:8000然后点击创建
原创
2023-04-23 12:39:20
222阅读
Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置 Lint/Test/Security/Audit/Deploy/Artifact 等任务，更好地把控项目质量。现在无论是
转载
2024-09-27 18:28:48
18阅读
一、如何部署前后端分离开发模式下，前后端是独立部署的，前端只需要将最后的构建物上传至目标服务器的Web容器指定的的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx让web容
转载
2024-06-20 13:19:10
338阅读
