vue3项目实例

【Vite+Vue3+Ts】挂载全局store/pinia（全局方法）

store文件内容：exportconstuseCounterStore=defineStore("counter",{state:()=>({lang:'en',}),actions:{},});新建插件piniaPlugin.tsimport{useCounterStore}from"@/store/index";//引入pinia方法exportdefault{install:(app:an
极致♀雨·2024-01-31 18:36

【Vue3+Ts】简单路由配置页面缓存keepAlive可选控制

router.ts路由文件配置constroutes=[{path:"/",name:"home",meta:{title:"首页",keepAlive:true,//主要代码},component:()=>import("@/view/Home/index.vue"),}]App.vue配置import{computed}from"vue";import{useRoute}from"vue-ro
极致♀雨·2024-01-31 18:35

【Vite+Ts+Vue3】使用Crypto-js封装AES加密

安装依赖cnpminstallcrypto-js--save项目创建secret.ts文件importCryptoJSfrom"crypto-js";//必须为16、24、32位constKEY="4564564564564564";constIV="4564564564564564";/***AES加密：字符串keyiv返回base64*/exportconstEncrypt=(word:any
极致♀雨·2024-01-31 18:05

【Vite+Ts+Vue3+Pinia】使用i18n国际化简单配置

安装i18ncnpminstallvue-i18n--savesrc目录新建language文件夹并新建以下文件新建en.ts（英文）constmessages={home:{title:"BookStore",hint:"ComputerScienceAndSoftwareEngineering",guessYouLike:"GuessYouLike",},};exportdefaultmess
极致♀雨·2024-01-31 18:05

【Vite+Ts+Vue3】项目多环境打包配置+axios+Api封装

安装axioscnpminstallaxios--save项目根目录新建以下配置文件开发环境//.env.developmentVITE_APP_BASE_API=http://localhost:3000/api生产环境//.env.productionVITE_APP_BASE_API=http://production/api测试环境//.env.testVITE_APP_BASE_API=
极致♀雨·2024-01-31 18:32

[工具探索]Safari 和 Google Chrome 浏览器内核差异

最近有些Vue3的项目，使用了safari进行测试环境搞开发，发现页面存在不同程序的页面乱码情况，反而google浏览器没问题，下面我们就对比下他们之间的差异点：日常开发googlechrome占多数；
ifanatic·2024-01-31 18:13

springboot3+vue3支付宝在线支付案例,后端接口-购物车

packagecom.example.demo.controller;importcom.example.demo.bean.Goods;importcom.example.demo.bean.Orders;importcom.example.demo.bean.Result;importcom.example.demo.service.IGoodsService;importcom.exampl
yrldjsbk·2024-01-31 18:36

分享一个关于 Vue3+Pinia+Koa+Three.js 全栈电商的项目总结

前言前几天一个朋友去义乌旅游，带回来很多小商品，就是一整个物美价廉，但是为什么线下购物和网购有的时候差别这么大（网购经常要退换货啊），为此我萌生了一个想法，3D是不是就可以实现在线看商品的细节了，退换货这么麻烦是不是可以省省了一、项目概述这个项目是对义务购app的一个模仿，相对于其官方app，我新增的亮点如下：商品排列布局使用瀑布流布局实现3D看商品功能实现3D看义乌商贸城同时，基础功能如下：使用
前端达人·2024-01-31 17:14

VUE3快速入门技巧

1.安装1.1进入网址，进行下载1.2用法用引入2.实列化2.1模板2.2创建2.3挂载3.条件渲染3.1v-if与v-show上面是Vue实例化的简易写法，注意看清楚哦4.属性渲染4.1v-bind5列表渲染指令5.1v-for
无言_f70a·2024-01-31 17:15

Vue3中快速简单使用CKEditor 5富文本编辑器

Vue3简单使用CKEditor5前言准备定制基础配置富文本配置目录当前文章demo目录结构快速使用demo前言CKEditor5就是内嵌在网页中的一个富文本编辑器工具CKEditor5开发文档（英文）
Thetimezipsby·2024-01-31 17:09

Vite4、Vue3、Axios 针对请求模块化封装搭配自动化导入（简单易用）

针对请求模块化封装搭配自动化导入（简单易用）目标目录目标代码前提步入正题src/utils/index.jssrc/api/index.jssrc/api/request.jssrc/api/service.jssrc/api/utils.jssrc/api/modules/demo.js自动化配置vite.config.jseslint校验问题作者GitHub：https://github.co
Thetimezipsby·2024-01-31 17:09

vite生产环境报错 TypeError: Failed to fetch dynamically imported module: xxx

问题描述vue3+vite项目：有时跳转页面会卡住，控制台信息如下：TypeError:Failedtofetchdynamicallyimportedmodule:xxx信息收集用户端复现了问题，从现场获取到控制台日志
Thetimezipsby·2024-01-31 17:09

如何纯前端实现文件下载

解决方案在vue2或者vue3项目中，可以把文件放在public文件夹下，然后使用a标签进行文件下载。如：我要下载的文件是模版.xlsx。首先，我把这个文件直接放到了public文件夹里。
yulamz·2024-01-31 16:06

Vue3下载WEBAPI导出的Excel文件

webApi查询数据保存为Excel//////获取LMI3D相机涂胶测量数据//////[HttpPost(Name="GetLMI3DGlueDataToExcel")]publicasyncTaskGetLMI3DGlueDataToExcel(QueryGlueMeasurementModelqgmm){Listresult=newList();result=awaitLinkAsiaDB
easyboot·2024-01-31 16:40

Vue3-Composition-API（一）

一、认识CompositionAPl1.OptionsAPI的弊端在Vue2中，我们编写组件的方式是OptionsAPI：OptionsAPI的一大特点就是在对应的属性中编写对应的功能模块；比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；但是这种代码有一个很大的弊端：当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分
DustinWangq·2024-01-31 15:43

Vue3之Vite打包优化

一.rollup-plugin-visualizer(打包视图分析)1.安装：npmirollup-plugin-visualizer-D2.配置：在vite.config.js中引入rollup-plugin-visualizer插件import{visualizer}from'rollup-plugin-visualizer';exportdefaultdefineConfig({plugin
26:28·2024-01-31 15:04

vue2整理

一.vue2语法参考文章补充:二.vue2项目1.创建项目参考创建项目的方法2.项目基本搭建现在大多维护的是vue2老项目，新项目都是用Vue3开发。基本搭建项目，考参考Vue3新项目搭建。
26:28·2024-01-31 15:33

Vue3的v-model说明和使用方法

Vue3的v-model是一个语法糖，它为表单输入和应用状态之间创建了双向绑定。这样，当用户在表单中输入时，数据会自动更新，反之亦然。
无妄的罪·2024-01-31 14:10

Vue3+webpack项目的vuex封装

Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单解释就是它是用来放项目所有组件都能共享的数据用的。首先安装vuex：npmivuex-s封装vuex的目录结构如下图：图1【./src/store】：用来存放封装vuex相关文件的文件夹；【./src/store/index.js】：封装vu
月影WEB·2024-01-31 13:53

【vue3】-解决build打包之后，无法获取import.meta.env环境变量的问题

转载自这篇文章关于vue3:vite-vue3-项目通过-importmetaenv-获取自定义的变量最近应用vite+vue3开发新我的项目，遇到非vite.config.js文件，通过import.meta.env
String佳佳·2024-01-31 12:40

【vue3+ts】组件定义props并设置初始值

interfaceProps{filterPopVisible:boolean;reqType:string;max:string;error:boolean;isMultiple?:boolean;defaultKeys?:any[];nodeKey?:string;}constprops=withDefaults(defineProps(),{isMultiple:true,nodeKey:"
String佳佳·2024-01-31 12:40

Vue3跟Vue2的区别（超详细，要收藏）

文章目录一、Vue3介绍哪些变化1.速度更快2.体积更小3.更易维护compositonApi更好的Typescript支持编译器重写4.更接近原生5.更易使用二、Vue3新增特性1.framents2
章IT·2024-01-31 12:32

Vue3组件通信 详解(上)

Vue3组件通信和Vue2的区别移出事件总线，使用mitt代替。vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所有的东西，合并到$attrs中了。
还能救一下嘻嘻·2024-01-31 11:17

Vue3之vue-router、pinia

1.路由基础路由的基本使用编程式导航命名视图2.路由传参方式一：就硬写方式二：通过query和params带参数的动态路由3.路由守卫全局前置守卫路由独享守卫组件内的守卫如何在组件外面使用vue-router和pinia1.路由基础路由的基本使用安装：npmivue-router路由的基本使用比较简单，举个样例即可明白样例的文件结构：└──src├──components│├──Home.vue│
开longlong了吗？·2024-01-31 11:12

Vue3组件通信 详解(下)

Vue3组件通信详解(上)-CSDN博客v-model通讯概述：实现父↔子之间相互通信。
还能救一下嘻嘻·2024-01-31 11:40

vue3-深入组件-透传属性

透传属性（透传attribute）什么是透传属性（透传attribute）?传递给一个组件，却没有被该组件声明为props或emits的attribute或者是事件监听器，例如classstyleid等。属性继承当一个组件以单个元素作渲染时，透传的属性会自动被添加到根元素上。// 组件import { ref } from 'vue'      这是深入组件-属性透传  .container {}
王大可996·2024-01-31 10:34

安装 vant-ui 实现底部导航栏 Tabbar

本例子使用vue3介绍vant-ui地址：介绍-Vant4(vant-ui.github.io)Vant是一个轻量、可定制的移动端组件库安装通过npm安装：#Vue3项目，安装最新版Vantnpmivant
_沐晨·2024-01-31 09:25

Vue3前端框架：动态组件详解

当谈到现代前端开发框架时，Vue.js通常是一个备受推崇的选择。在Vue.js3中，动态组件是一个强大而灵活的功能，为开发人员提供了更多的控制权和创造性。本文将深入探讨Vue.js3中动态组件的详细内容，探讨其用法、优势以及如何在项目中充分利用这一功能。1.什么是动态组件？在Vue.js中，动态组件是指在运行时根据一定的条件或用户输入来切换组件的能力。这意味着你可以在同一个位置渲染不同的组件，而无
前端程序猿i·2024-01-31 08:29

VUE3子表格嵌套分页查询互相干扰的问题解决

VUE3在表格中嵌套子表格子表格的分页查询互相干扰的问题解决简单嵌套如果不需要做子表格的分页查询，那么可以直接在主表格中嵌套子表格，有两种方式；一种是主表格加载的同时加载子表格数据，另一种是点击展开时加载子表格数据
液态不合群·2024-01-31 07:16

vue3源码（三）computed

1.功能接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象。默认不执行，在取值时执行，具有缓存功能，数据不变多次取值只触发一次取值计算。import{reactive,effect,computed,}from"/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js";conststate=reac
橙蚊镜0819·2024-01-31 07:58

ElementUI安装与使用指南

Element官网-安装指南提醒一下：下面实例讲解是在Mac系统演示的；一、开发环境配置电脑需要先安装好node.js和vue2或者vue3安装Node.jsNode.js中文网安装node.js命令：
ChinaDragonDreamer·2024-01-31 07:27

低代码核心思想：插件化开发（vue3实现）

我们在开发一些组件插件的时候，需要动态的从外部去注入第三方插件1.如何做一个插件化的项目，模拟代码如下//插件设计内容//1.插件底座//2.插件注册方式//3.调用插件classCalculator{//插件底座plugins=[]constructor(){}//注册use(plugin){this.plugins.push(plugin)this[plugin.name]=plugin.fn
小江的博客·2024-01-31 04:57

实习日志day7

日期2019年6月25日第7天共10天实习地点科技楼423教学大纲中规定的实习教学内容校内综合实训是系统讲授微信小程序开发技术，通过小程序开发项目实例来训练学生的实践能力，检验学生对微信小程序开发技术所学知识的综合运用能力的重要环节
薛哥的博客·2024-01-31 02:49

vue3的父传子与子传父

父传子：父亲-在子组件标签上通过自定义属性传递数据儿子-通过constprops=defineProps({...})接受子传父：父亲：在子组件标签上绑定自定义事件儿子：通过constemit=defineEmits(['自定义事件名称'])emit('自定义事件名称',参数)
香香爱编程·2024-01-31 02:44

vue2与vue3部分面试题

watch与watchEffect相同点都可以对数据进行侦听不同点watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控reactive与ref都是用来生成响应式数据不同点reactive不能处理简单类型的数据，只支持引用数据类型,ref支持基本和引用数据类型ref通过.value获取数据，reactive不需要.valueref创建响应式引用数据类型低层依赖react
香香爱编程·2024-01-31 02:43

rollup打包报错

文件中没有定义type类型报错.jpg解决：定义"type":"module"问题2：在ES模块作用域中未定义__dirname再次报错.png此文件被视为ES模块，因为它具有“.js”文件扩展名，并且“E:\vue3
脱贫不脱发·2024-01-31 00:20

vue3获取子组件ref结果undefined，父组件调用子组件的方法

需求是在切换货号的时候，清空上传过的图片，upload是子组件，在父组件的事件中调用子组件的方法用了letuploadRef=ref(null);获取不到，用proxy.$refs['uploadRef']才能获取到实例import{getCurrentInstance}from"vue"const{proxy}=getCurrentInstance();constgetNewData=()=>{
空我我·2024-01-31 00:59

vue3 + antd 封装动态表单组件（三）

传送带：vue3+antd封装动态表单组件（一）vue3+antd封装动态表单组件（二）前置条件：vue版本v3.3.11ant-design-vue版本v4.1.1我们发现ant-design-vueInput
guizi0809·2024-01-31 00:55

Vue学习笔记13-- Vue3之计算属性与监视

7、计算属性与监视1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){...//计算属性——简写letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——完整letfullName=computed({get(){r
jxncxgx·2024-01-31 00:24

vue3+threejs+koa可视化项目——实现登录注册（第三步）

文章目录⭐前言往期node系列文章threejs系列相关文章vue3+threejs系列⭐koa后端登录注册逻辑（jwt）koa登录注册⭐vue3前端登录注册权限控制登录页面注册页面⭐总结⭐结束⭐前言大家好
yma16·2024-01-30 22:17

springboot3+vue3支付宝在线支付案例-渲染产品列表页面

springboot3+vue3支付宝在线支付案例-渲染产品列表页面！今天折腾了半天，完成了vue3前端项目的产品列表选染。我们使用到了技术有axios（发送跨域的请求获取产品）。
yrldjsbk·2024-01-30 22:13

vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

今天来带大家从0开始搭建一个vue3版本的后台管理系统。
口袋の的天空·2024-01-30 20:55

vue3 + ts vue_3.4 setup单文件组件中的属性

props各种类型import{ref,PropType}from'vue';interfacelistType{addres:string;code:number;}interfaceftObj{obj1:string[];obj2:{[key:string]:any;};}constprops=defineProps({name:{type:StringasPropType,default:'
汝&戏·2024-01-30 19:02

【Vue】手把手带你深入了解Vue3.0的渲染器

前置概念vdom：多个虚拟元素节点组合成的树状结构vnode：某一个虚拟元素节点挂载：将虚拟DOM节点渲染成真实DOM节点的过程一、渲染器的设计首先我们要区分vue当中两个概念，一个是渲染器（renderer），一个是渲染（render）。前者renderer，渲染器的作用是将我们的vdom转化成真实的DOM元素来呈现。后者render，渲染函数的作用是将我们的vnode添加并且挂载到真实DOM容
Triumph-light·2024-01-30 18:14

【Vue】Vue3.0样式隔离

在这里记录一下Vue3.0里面的样式隔离特性，在项目开发过程当中，有时候将样式单独提到了一个文件当中再引入到单组件文件当中，会导致没有样式隔离。这里阅读Vue官方文档找到了解决办法。
Triumph-light·2024-01-30 18:12

【vue】defineModel在vue3.4中的最新用法和详解

在2023年12月28日，尤大发布了vue3.4版本，这个版本主要对一些实验性特性的改进（比如defineModel），大量重写了模板编译器并重构了响应式系统，可以说是大大提升了运行速度和效率。
白桃与猫·2024-01-30 18:31

vue3中祖孙组件之间的通信provide和inject

一、在vue3中新增的祖孙之间通信的方式provide和inject是Vue中的两个相关功能，它们一起提供了一种祖孙组件之间共享数据的方式。
余生tt·2024-01-30 18:07

初识Vue 3.0 —— v-html: 插入html

data(){return{rhtml:"我的红色的"}}}Vue.createApp(htmls).mount(".htmlbox");交互效果见：https://course.51qux.com/vue3
兔子敲代码·2024-01-30 17:52

Webpack5中使用file-loader和url-loader打包图片

最近在看coderwhy老师的Vue3视频，进度：Webpack打包图片资源。
彭宏豪·2024-01-30 17:29

一、创建Vue3项目

1.下载node.js下载地址：https://nodejs.org/zh-cn优先选择16版本;node-v||node-version可以检查本地node.js版本2.设置淘宝镜像源npmconfigsetregistryhttps://registry.npmmirror.com/设置淘宝镜像源npmconfiggetregistry查看当前镜像源3.创建项目快速上手|Vue.jsnpmcr
王布尔·2024-01-30 16:48
上一页 19 20 21 22 23 24 25 26 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他