摘要:本文阐述了Nuxt.js作为基于Vue.js的服务器端渲染框架,其在提升Web开发效率、确保代码质量和优化应用性能方面的核心价值。通过详尽的安装步骤、配置说明、常见问题解决策略及进阶部署方法,为开发者搭建和部署Nuxt.js项目提供了全方位指导。 ...
这篇文章介绍了Web Components技术,它允许开发者创建可复用、封装良好的自定义HTML元素,并直接在浏览器中运行,无需依赖外部库。通过组合HTML模板、Shadow DOM、自定义元素和HTML imports,Web Components增强了原生DOM的功能,提高了组件化开发的封装性和... ...
这篇文章介绍了微前端架构概念,聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化,以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应用与子应用的通信,以及如何解决跨域问题和优化集成过程,从而实现前端应用的灵活扩展与组织。 ...
这篇文章介绍了如何在Vue框架中实现自定义渲染器以增强组件功能,探讨了虚拟DOM的工作原理,以及如何通过SSR和服务端预取数据优化首屏加载速度。同时,讲解了同构应用的开发方式与状态管理技巧,助力构建高性能前端应用。 ...
SoybeanAdmin —— 一个清新优雅、高颜值且功能强大的后台管理模板。基于最新的前端技术栈,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。 ...
你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的呢? ...
写在开头 点赞 + 收藏 学会 在后台系统中有一种常见的功能,点击按钮将整个网页全屏,再点击退出全屏。 浏览器提供了2种全屏方式,一种通过API在js中实现,另一种是按F11键进入全屏模式。 但F11进入的全屏模式优先级更高,无法通过API退出。 基本知识 元素全屏 检查可用 ...
写在开头 点赞 + 收藏 学会 前言 在这之前公司项目的文档预览的方式都是通过微软在线预览服务,但是微软的在线服务有文件大小限制,想完整使用得花钱,一些图片文件就通过组件库antd实现,因为我们项目存在多种类型的文件,所以为了改善用户的体验,决定把文件预览单独弄一个拆出一个项 ...
setup概述 setup是Vue3中新的配置项,值是一个函数,组件中所用到的数据、方法、计算属性、监视等等,均配置在setup中。 setup函数返回的对象中的内容,可直接在模版中使用。 setup中不能使用this关键字,this是undefined。 setup会在beforeCreate() ...
这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格,实现代码规范性与可读性的提升。通过设置规则、解决冲突、以及将配置融入持续集成流程和代码审查过程,确保团队协作时代码风格的一致性,提升开发效率与项目维护性。 ...
基于Vue-Cli创建 现在官方推荐使用 create-vue 来创建基于 Vite 的新项目(⚠️ Vue CLI 现已处于维护模式!) # 查看@vue/cli版本号,确保@vue/cli版本在4.5.0以上 vue --version # 没有安装@vue/cil或者版本不在4.5.0以上执行 ...
这篇文章介绍了如何在TypeScript环境下为Vue.js应用搭建项目结构,包括初始化配置、创建Vue组件、实现状态管理利用Vuex、配置路由以及性能优化的方法,旨在提升开发效率与应用性能。 ...
这篇文章介绍了如何使用Vue CLI优化项目构建配置,提高开发效率,涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。 ...
这篇文章介绍了如何在Vue框架中实现数据的高效验证与处理,以及如何集成ECharts、D3.js、Chart.js等图表库优化数据可视化效果。同时,探讨了Progressive Web App(PWA)的接入与优化策略,以提升Web应用的用户体验与加载速度。 ...
这篇文章介绍了如何在Vue.js应用中利用Vue Router实现单页面应用的路由管理,包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法,旨在提升用户体验和应用加载效率 ...
一、为什么要安装多个版本的node.js 现在开发前端项目,有的需要node.js版本是18以上的,或者其他版本,然而电脑上安装的是v16,直接升级到18,又怕影响老项目,最好的办法就是安装多个版本,需要哪个切换一下就行。 网上有一些安装多个版本node.js的做法,很麻烦。推荐nvm这个工具,很方 ...
前言 众所周知,vue3的template中使用ref变量无需使用.value。还可以在事件处理器中进行赋值操作时,无需使用.value就可以直接修改ref变量的值,比如:<button @click="msg = 'Hello Vue3'">change msg</button>。你猜vue是在编 ...
typora-root-url: img vue脚手架 1 vue脚手架的概念 Vue脚手架(Vue Scaffolding)是Vue.js**官方提供的一个工具,专门用于快速搭建单页面应用(SPA)的项目结构。它通过命令行界面(CLI)提供了一套标准化的开发流程,包括项目初始化、自动化构建、本 ...
title: Vuex 4与状态管理实战指南 date: 2024/6/6 updated: 2024/6/6 excerpt: 这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践,包括为何需要状态管理,Vuex的核心概念如store、actions、mutations和getters,以及 ...
写在开头 点赞 + 收藏 学会 [webpack由浅入深]系列的内容 第一层: 了解一个小功能的完整流程. 看完可以满足好奇心和应付原理级别面试. 第二层: 源码陪读, webpack源码比较灵活, 自己看容易陷入迷惑. 文章里会贴出关键流程的代码来辅助阅读源码. 如果你正在 ...