Vue3项目搭建

从零搭建Vue3工程化项目实战指南（2025新版）

一、为什么需要工程化？传统开发痛点：手动管理依赖版本缺乏统一构建流程代码规范难以统一项目结构混乱工程化优势：标准化开发流程自动化构建/测试生产环境优化可维护的代码结构二、环境准备（Windows/Mac通用）1.安装Node.js推荐使用nvm管理多版本：#安装nvmcurl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/instal
超浪的晨·2025-02-12 18:00

vue3: const一个function怎么写呢？

回答：在Vue3中，`ref`和`reactive`是两种常用的响应式数据定义方式。`ref`用于定义单个响应式对象或原始值，而`reactive`用于定义响应式对象。
fury_123·2025-02-12 13:56

Vue3快速上手

Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的
ConstMAO·2025-02-12 12:51

UniApp + Vue3开发中的坑：无法获取到dom元素的排查过程 无法直接修改style样式的坑

UniApp+Vue3开发中的坑：无法获取到dom元素的排查过程无法直接修改style样式的坑欢迎关注『开发必备』专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。
代码简单说·2025-02-12 03:17

[vue3] Ref Reactive

【b站-【前端面试】Vue3ref与reactive区别】Ref：Ref用于创建一个响应式的基本数据类型，比如数字、字符串等。它将普通的数据变成响应式数据，可以监听数据的变化。
533_·2025-02-12 02:09

【前端】【面试】ref与reactive的区别

ref与reactive的区别笔记一、概述在Vue3的组合式API中，ref和reactive是两个非常重要的响应式工具，它们都用于创建响应式数据，但在使用方式、适用场景和内部实现上存在一些区别。
患得患失949·2025-02-12 01:03

博客项目-day01

项目使用技术springboot+mybatisplus+redis+mysql项目搭建数据库以下是具体的sql建表结构CREATETABLE`blog`.
小袁拒绝摆烂·2025-02-11 21:00

vue3 在线预览word文件

一、使用mammoth插件安装插件pnpminstallmammoth--save-dev使用importmammothfrom"mammoth";import{ref}from"vue";consthtmlContent=ref("");consthandleFileUpload=async(event)=>{constfile=event.target.files[0];if(file){co
·2025-02-11 21:43

软件工程教育的革命：AI辅助学习与实践

此外，繁琐的代码编写和项目搭建过程也常常耗费学生大量时间和精力，影响学习效率。为了解决这些问题，AI写代码工具应运而生，并正在深刻地改变着软件工程教育的模式。
·2025-02-11 20:38

Vue3计算属性

比如说，我们有这样一个包含嵌套数组的对象：//jsconstauthor=reactive({name:'JohnDoe',books:['Vue2-AdvancedGuide','Vue3-BasicGuide
海绵宝龙·2025-02-11 18:05

Vue3 实现 勾选 + 列表拖拽 + 搜索列表

左侧勾选对应右侧显示右侧删除对应左侧取消勾选效果图:可选属性(共{{items.length}}个)全选{{item.label}}全选-->已选属性(共{{selectedItems.length}}个){{element.label}}置顶删除-->取消确认import{computed,ref,toRefs}from'vue'importdraggablefrom'vuedraggable'
A-sleep·2025-02-11 17:59

vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题

vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过:src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题vue3
A-sleep·2025-02-11 17:29

vue3项目中使用lodash

1.安装lodashnpmilodash--save2.全局使用main.ts.......import_from'lodash'constapp=createApp(App)app.config.globalProperties.lodash=_;//设置全局变了3.界面使用......import{getCurrentInstance}from"vue"const{proxy}=getCurr
·2025-02-11 16:25

vue3+vite项目h5/web配置浏览器自适应适配（postcss-px-to-viewport-8-plugin）

注意，项目中不要写行内样式vue3+vite项目配置适配H5主要安装一下两个插件：amfe-flexible（主要用于动态设置根元素字体大小(rem)，以根据屏幕尺寸进行自适应布局）postcss-px-to-viewport
·2025-02-11 16:25

vue3+vite项目，elementPlus自定义主题

vue3+vite配置elementPlus主题需要安装一下两个插件：unplugin-vue-componentsunplugin-auto-import开始配置：第一步、安装插件pnpminstall-Dunplugin-vue-componentsunplugin-auto-import
·2025-02-11 16:54

monorepo代码管理框架

1.新建vue3-component文件夹2.运行pnpminit3.pnpmivuetypescript4.新建.npmrcshamefully-hoist=truelink-workspace-packages
Lanwarf-前端开发·2025-02-11 13:36

Vue全流程--Vue3组合一ref与reactive（实现响应式）

ref：定义基本类型的响应式数据先看ref使用的位置import{ref}from'vue'exportdefault{name:'App',setup(){//数据letname=ref('张三')letage=ref(18)//方法functionchangeInfo(){//name='李四'//age=48console.log(name,age)}//返回一个对象（常用）return{n
不清参·2025-02-11 12:30

Java全栈项目实战：在线课程评价系统开发

一、项目概述在线课程评价系统是一款基于SpringBoot+Vue3的全栈应用，面向高校师生提供课程评价、教学反馈、数据可视化分析等功能。
天天进步2015·2025-02-11 11:45

深挖vue3基本原理之四 —— 组合式 API

四、组合式API的底层实现机制和设计4.1组件实例上下文深度剖析interfaceComponentInternalInstance{uid:number//唯一标识符（组件树定位关键）type:ConcreteComponent//组件原始定义（函数/对象形式）parent:ComponentInternalInstance|null//父实例（跨层级通信基础）appContext:AppCon
ZhooooYuChEnG·2025-02-11 10:14

Vue2与Vue3的区别

Vue2和Vue3是Vue.js框架的两个主要版本。Vue3在Vue2的基础上做了很多重要的改进和新增的特性，使得开发者能够更加高效地开发应用。
呀啊~~·2025-02-11 10:14

vue3+vite使用Monaco-editor

安装Monaco-editornpminstallmonaco-editor安装VitePluginMonacoEditorvdesjs/vite-plugin-monaco-editor-Vite中文文档npminstall--save-devvite-plugin-monaco-editorvite.config.ts:import{defineConfig}from'vite';import
小杨爱编程·2025-02-11 06:05

vue3结合element-plus之如何优雅的使用表单组件

背景在日常开发中，我们会经常使用element-ui或者是antdesign或者是element-plus等组件库实现搜索功能这里就需要用到相关表单组件下面就以element-plus为例，我们实现一个搜索功能的组件，并且随着屏幕尺寸的变化，其布局也会跟随变化最终大致效果如下：这里就没有对布局进行过多的美化，旨在实现其功能前置知识储备对vue相关知识熟悉熟练使用element-plus对v-bin
小白小白从不日白·2025-02-11 05:30

vite + vue3 + uniapp 项目从零搭建

vite+vue3+uniapp项目从零搭建1、创建项目1.1、创建Vue3/vite版Uniapp项目1.2、安装依赖1.3、运行项目2、弹出用户隐私保护提示方法2.1、更新用户隐私保护指引和修改配置文件
W.Y.B.G·2025-02-11 05:59

vue3中v-model的原理

1.v-model的实现方式v-model在Vue.js中是一个语法糖，它实际上是:modelValue和@input事件的组合。具体来说，v-model做了以下几件事情：初始化绑定：当Vue实例创建时，它会解析模板中的v-model指令，并找到对应的表单元素。然后，它会将该表单元素的value属性与Vue实例中的某个数据属性（如data中的某个属性）进行绑定。这通常是通过Proxy来实现的，以实
zzzjnnn·2025-02-11 04:58

vue3.0 从入门到一往无前

文章目录安装及创建安装创建一.选项式与组合式选项式API组合式API区别：二、响应机制（ref、reactive）1.reactive:2.ref:3.isRef与isReactive4.toRef与toRefs三、组件通信四、路由vue-router五、状态管理store(pinia)安装创建定义及使用：六、生命周期七、内置组件TeleportSuspense八、Hooks为什么要封装Hooks
Ccfitch·2025-02-11 04:57

【Vue】在Vue3中使用Echarts的示例 两种方法

文章目录方法一template渲染部分js部分方法一实现效果方法二template部分jsorts部分方法二实现效果贴个地址~ApacheECharts官网地址ApacheECharts示例地址官网有的时候示例显示不出来，属于正常现象，多进几次就行开始使用前，记得先安装好echartnpminstallecharts--save以下代码我采用的都是vue文件内全部引入，是否按需引入看各自项目要求进
祁许·2025-02-11 04:55

Vue全流程--Vue3.0与Vue2.0响应式原理对比

中数据的响应式需要使用Vue.set这么一个api，修改数据需要使用Vue.delete这么一个api，删除数据数据代理这个当面的理解可以看看我前面文章Vue全流程--数据代理的理解以及在Vue中的应用-CSDN博客Vue3
不清参·2025-02-10 23:47

【Vue3】使用Vite构建工具构建Vue3项目

vite官网：Vite中文网什么是vite？——新一代前端构建工具。优势如下：开发环境中，无需打包操作，可快速的冷启动。轻量快速的热重载（HMR）。真正的按需编译，不再等待整个应用编译完成。传统构建与vite构建对比图一、利用cmd和vscode创建注意：使用npm前提是要先安装配置node1.查看npm版本npm-v2.进入工作目录，根据npm的版本执行指令#npm6.x
早睡早起长头发·2025-02-10 18:39

Vue 3.4 深度评测：全新 defineModel 解决了哪些痛点 ？

Vue3的发布带来了诸多重大改进，而Vue3.4版本更是引入了全新的`defineModel`特性。这个特性旨在解决一些在组件开发过程中常见的痛点问题，让我们一起来深度评测一下它到底解决了哪些痛点。
码上前端·2025-02-10 15:17

在 Vue 3 项目配置 rem

在Vue3中配置rem时，设计稿1920，如果你希望实现一个最小宽度为1024px的适配，意思是当屏幕宽度小于1024px时不再缩小字体大小，始终保持最小宽度的rem配置。
·2025-02-10 14:35

vue3+websocket+springboot、websocket消息通讯

websocket通信后端后端-配置类：packagecom.yupi.project.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.socket.config.annotation.EnableWebSocket;importorg.springfra
AA大鹏·2025-02-10 12:52

论文解读（MGAE）《MGAE: Masked Autoencoders for Self-Supervised Learning on Graphs》

优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
虚幻私塾·2025-02-10 03:26

为什么要用proxy代替defineProperty

文章目录vue3-为什么要用proxy代替defineProperty1.什么是Object。
16年上任的CTO·2025-02-09 20:31

11vue3实战-----封装缓存工具

11vue3实战-----封装缓存工具1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具1.背景在上一章节，实现登录功能时候，当账号密码正确，身份验证成功之后，
太阳与星辰·2025-02-09 19:56

VUE3 父组件传递给子组件的值 子组件怎么处理后使用

本地化处理（避免直接修改props)监听proxy数据的某个属性需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化import{ref,watch}from'vue'constprops
A-sleep·2025-02-09 15:59

vue3全局函数-用于全局使用getCurrentInstance

我们一般在vue3上挂在一些全局函数，都是基于globalPropertiesimport{createApp}from"vue";import"@/style.css";importAppfrom"@
·2025-02-09 14:58

第十七章 webpack5项目搭建Vue-Cli（开发模式）

step1–创建项目目录创建一个目录用来搭建vue-cli的项目mkdirvue-clicdvue-clistep2–初始化项目初始化项目，生成一个package.json文件npminit-ystep3–编写vue-cli的开发模式配置新建目录/|-config||--webpack.dev.js||--webpack.prod.js我们这里的webpack.dev.js采用复用react-cl
天界程序员·2025-02-09 09:15

Vue 3 30天精进之旅：Day 16 - 组合式API进阶

欢迎来到“Vue330天精进之旅”的第16天！今天我们将深入探讨组合式API的进阶用法，包括reactive和ref的细节，以及生命周期钩子的应用。
码上飞扬·2025-02-08 22:22

在 Vue 中实现图表数据的动态展示

在本篇博客中，将详细介绍如何在Vue3中借助CompositionAPI（setup语法糖）实现图表数据的动态展示，同时会使用Chart.js库辅助可视化，并深入探讨Vue的reactivity特性在这一过程中的应用
东锋1.3·2025-02-08 21:50

vue3+vuetify安装

vue3+vuetify的安装一、安装nodejs+npn二、使用vite创建工程1、创建工程2、安装vue-cli3、添加vuetify库4、安装vue-router5、启动6、打开测试页面一、安装nodejs
芝法酱·2025-02-08 21:16

Vue3中watch和watchEffect的使用场景和区别

场景一：自动追踪依赖并执行副作用场景二：初始化时立即执行副作用区别监听方式回调触发时机响应式数据追踪方式深度监听减少watch中深度监听的性能开销的优化方法精简被监听的数据结构优化回调函数逻辑精准监听在Vue3
zhanggongzichu·2025-02-08 20:42

【vue】vite + ts +vue3 安装及使用 pinia

vue3+TS安装使用pinia状态管理_vue3tspinia-CSDN博客Vue项目进阶：再谈Pinia函数式（compositionAPI）用法-腾讯云开发者社区-腾讯云
不懂装懂的不懂·2025-02-08 11:01

2025 年 Vue 的下一步是什么？

ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读随着我们迈入2025年，掌握Vue生态系统的最新动态已经不仅仅是跟上时代步伐，更是获取竞争优势的关键。
·2025-02-08 06:31

接入 deepseek 实现AI智能问诊

创建UniApp项目使用HBuilderX创建一个新的UniApp项目（选择Vue3或Vue2模板）。
何包蛋H·2025-02-08 04:37

【Uniapp-Vue3】使用uni.$emit和$on页面通讯实现发布成功即时更新数据

我们有一个页面A，我们在A中可以上传一条数据，但是数据在页面B进行展示。想要实现A中上传数据后页面B中立刻更新数据。首先，在页面A中使用uni.$emit方法：uni.$emit("事件名称",发送数据);在页面B中使用uni.$on方法：uni.$on("事件名称",(e)=>{//处理逻辑})
永久旅途·2025-02-08 03:03

vue3新建组件库项目并上传到私库

创建vue3项目，步骤省略#nexus配置访问http://192.168.0.9:8081/账号密码adminYanfabu01!
肖老师xy·2025-02-08 02:59

React Native 列表组件：FlashList、FlatList 及更多

CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在移动开发中，高效展示数据列表至关重要。作为ReactNative开发者，我们可以使用多种强大的工具来完成这一任务。
·2025-02-08 02:57

实现一个 SEO 友好的响应式多语言官网 (Vite-SSG + Vuetify3) 我的踩坑之旅

在2023年的年底，我用Vite-SSG+Vue3+Vuetify3把之前使用SPA编写的官网进行了重构，支持多语言，响应式并且对SEO和社交媒体分享十分友好在2023年的年底，我终于有时间下定决心把我的
·2025-02-08 02:54

vue3+vite 在已有项目集成mars3d

引入按照mars3d官网的环境要求和版本下载依赖我本地环境是nodev20.x.x,npmv10.x.x,vite依赖版本“vite”:“5.3.2”,“mars3d”:“~3.8.0”,“mars3d-cesium”:“~1.120.0”,需要下载vite-plugin-mars3d在vue.config.js中引入import{mars3dPlugin}from"vite-plugin-mar
不喝可乐_·2025-02-07 15:53

前端Vue必问面试题

1，Vue3.0为什么要使用proxy在Vue2中，0bject.defineProperty会改变原始数据，而Proxy是创建对象的虚拟表示，并提供set、get和deleteProperty等处理器
·2025-02-07 13:23
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他