在2023年的年底，我终于有时间下定决心把我的UtilMeta项目官网进行翻新，主要的原因是之前的官网是用Vue2实现的一个SPA应用，对搜索引擎SEO很不友好，这对于介绍项目的官网来说是一个硬伤所以在调研一圈后，我准备用Vite-SSG+Vue3+Vuetify3把官网重新来过，前后花了两周左右的时间，本文记录着开发过程中的思考和总结，要点主要有为什么SPA应用不应该用于搭建项目官网?SSG项目的结构是怎样的，如何配置页面的路由？如何搭建多语言的静态站，编写支持多语言的页面组件，以及使用lang/hreflang为页面指定不同的语言版本？如何用unhead库为每个页面配置不同的html头部元
文章目录⭐前言💖vue3系列文章⭐可视化fmp、fp指标💖MutationObserver计算dom的变化💖使用条形图展示fmp、fp时间⭐项目代码⭐结束⭐前言大家好，我是yma16，本文分享关于前端vite+vue3——可视化页面性能耗时（fmp、fp）。fmp的定义FMP（FirstMeaningfulPaint）是一种衡量网页加载性能的指标。它表示在加载过程中，浏览器首次渲染出有意义的内容所花费的时间。有意义的内容指的是用户可以看到和交互的元素，如文本、图片、按钮等。首次渲染的定义可以根据具体的要求和场景而有所不同。通常情况下，首次渲染是指在页面加载过程中，浏览器首次绘制出用户能够理解和
3月8号，Rolldown[1] 正式开源了，它是一个基于 Rust[2] 语言开发的JavaScript打包器，其设计目标是成为Vite在未来将要采用的核心打包工具。它不仅提供了与Rollup兼容的API和插件体系，而且在功能范围上，它更加贴近于 esbuild[3] 的设计理念。图片Rolldown基于Rust语言开发，并且是在 Oxc[4] 基础架构上构建的。目前，Rolldown内部已经在使用Oxc提供的parser和resolver。未来，随着Oxc转换和压缩功能的推出，它们也会被整合到Rolldown中。图片为什么设计RolldownRolldown设计初衷是作为Vite未来采用的
前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~在2024年2月28号-2024年2月29号，Vue召开了 VueJSAmsterdam2024大佬尤雨溪进行了开场主旨演讲，并回顾了Vue十年来的历程，从一个视图层工具，逐成为了一个非常出色的、拥有强大生态的前端框架图片图片回顾Vue3.4首先回顾了一下再2023年末发布的Vue3.4，主要列举了：重写了模板编译器，性能提升明显watchEffect响应式效率的提升defineModel从实验性转为正式API简化了v-model和v-bind的写法图片展望Vue3.5接着是对于Vue3.5的展望，
使用Vue3、TypeScript、Vite、Naive-ui、Less、Pinia开发ChromeV3插件一、使用Vite创建Vue项目npmcreatevite@latest#npmyarncreatevite #yarnpnpmcreatevite #pnpm选择Vue和TS进入项目，并进行pnpmi安装node_modulespnpmi#安装node_modules包此时项目文件夹目录为：.├──README.md├──index.html├──package.json├──pnpm-lock.yaml├──public│└──vite.svg├──src│├──App.vue
什么是微前端？微前端是web应用程序的一种架构方法，程序的前端代码被划分为更小的、独立开发的和可部署的单元，称为微前端。这种方法允许不同的团队在前端的不同部分工作，同时通过隔离层保持集成，提高了开发速度、可扩展性和灵活性。这是一种管理复杂性和促进前端开发自主性的方法。模块联合模块联合是一项关键技术，使JavaScript应用程序能够在共享依赖项的同时从另一个应用程序动态加载代码。当使用联合模块的应用程序缺少所需的依赖项时，Webpack（底层技术）会自动从联合构建源获取缺少的依赖项。从而允许跨多个微前端高效共享和使用公共库。为什么选择Vite？虽然模块联合最初是在Webpack中引入的，但Ja
解决方案一：eslint插件没有全部安装，安装以下插件：npminstalleslint-plugin-nodeeslint-plugin-import eslint-plugin-standardeslint-config-standard eslint-plugin-promise-D解决方案二：注释.eslintrc.cjs文件中的standard，去掉standard后可能一些eslint标准配置就失效了，建议通过方案一方式解决。
在开发过程中，有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档：开发服务器选项|Vite官方中文文档第一种：使用插件@vitejs/plugin-basic-ssl这个插件仓库地址：https://github.com/vitejs/vite-plugin-basic-ssl安装依赖@vitejs/plugin-basic-ssl：pnpmi@vitejs/plugin-basic-ssl然后配置到vite中：import{defineConfig}from'vite'importvu
目录项目搭建步骤确定node版本使用Vite创建Vue3项目规范目录结构配置环境修改Vite配置文件集成路由工具VueRouter集成状态管理工具Pinia集成CSS预编译器Sassvite-plugin-svg-icons图标组件集成UI框架ElementPlus集成HTTP请求工具Axios项目代码规范集成ESLint配置集成Prettier配置解决ESLint与Prettier的冲突配置husky+lint-staged集成Stylelint样式的校验问题及解决1、vue3报错解决：找不到模块或其相应的类型声明。（Vue3cannotfindmodule）2、Cannotfindmodu
文章目录一、项目简介1.1微头条业务简介1.2技术栈介绍二、项目部署三、准备工具类3.1异步响应规范格式类3.2MD5加密工具类3.3JDBCUtil连接池工具类3.4JwtHelper工具类3.4JSON转换的WEBUtil工具类四、准备各层的接口和实现类4.1准备实体类和VO对象4.2DAO层接口和实现类4.3Service层接口和实现类4.4Controller层接口和实现类4.4.1PortalController五、开发跨域CORS过滤器5.1什么是跨域5.2为什么会产生跨域5.3如何解决跨域六、PostMan测试工具6.1什么是PostMan6.2下载PostMan6.3怎么使用P
