前端开发 Vue data的两种编写形式 Vuedata的两种编写形式一、对象式data：{}二、函数式data（）{}组件中data的形式必须是函数式，否则会报错之所以组件中data使用函数式是因为：Vue中的组件可能需要复用，当两个页面同时使用该组件，如果使用的是对象式，两个页面都指向一个data对象，当一个页面该组件修改了data的数据，另一个页面该组件的data也会被更改。使用函数式就不会产生此问题
前端开发 vue3 setup语法糖下父组件调用子组件的方法 vue3下，父组件调用子组件的方法，如果使用了<scriptsetup>这种写法，那么子组件方法需要采用defineExpose()进行修饰，才能被外界调用。上代码：1、子组件_pop.vue:<template>。。。</template><scriptsetup>import{defineExpose}from"vue";constpopIt=(
前端开发 vue3多个项目共享开发和单个项目独立打包的解决方案 由于实际项目的特点产生了多系统共享开发和独立打包的需求，主要原理在于应用vue的多页面支持和npm的打包定制。本方案中，vue项目由一个主程序和若干个子系统构成。主程序代码放置于外层，提供共享组件和功能；而子系统各自独立，仅包含私有代码。运行时，可整个项目集成运行，也可以单个子系统运行；打包类似，可整体打包，也可单个子系统独立打包。一、项目简介近期参与的一个项目，业主是一个单位辖下多个部门，每个部
前端开发 vue3中使用$refs 在vue2中，如果想直接引用页面中的对象，是这样子的：<template><div><inputtype="text"ref="txt1"value="hello"/></div></template><script>exportdefault{methods:{test(){console.log(this.$refs.tx
前端开发 vue3 编译报 ESLint: ‘defineProps‘ is not defined no-undef 错误问题 解决之道，在/package.json的eslintConfig.env中加入一行："vue/setup-compiler-macros":true1网上找答案，总是扯什么修改.eslint.js文件，须知改文件位于node_modules，如大海捞针，并且有多个。改这里是没有道理的，也没有效果。可能是很久之前的答案了吧。
前端开发 vue页面中使用getElementsByClassName无法获取元素问题 一、问题描述在vue页面中，使用getElementsByClassName获取dom，发觉总是获取不到，返回的数组，空空如也，长度为0。二、问题分析据说这是由于vue的机制造成的。需要等所有内容都挂载完毕才行。具体内容可见参看文章一。要使用nextTick。我印象中，nextTick好像总是与onMounted一起使用。但其实不是。以下例子中，nextTick就没有跟onMounted放在一起，
前端开发 vue项目读取全局配置 =================================================说明，本文提法有误，未能解决发布后修改配置生效问题。=================================================普遍的需求，却很少有现成的答案。一、需求及思路我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有
前端开发 vue将json字符串转换为数组_json字符串、json对象、数组 三者之间的转换 varObj=JOSN.parse(“cscac”);//将JSON字符串转换成JSON对象var“cscac”=JSON.stringify(Obj)//将JSON对象转换成JSON字符串将json对象转换成json数组letobj=JSON.parse(ress);constuserinfo=[];for(letiinobj){userinfo.push(obj[i])}console.log
前端开发 vue项目中img的src动态赋值 没想到这破东西，居然这么折腾人。时间紧，长话短说。一般这个动态赋值，要用require。而且，这个require里，只能有一个变量，多个变量，有运算，有方法，都不行。1、不行<img:src="require(`@/${state.path+photo.name}`)":alt="photo.text"/>12342、不行<img:src="require(getPath(pho
前端开发 vue3应用elementPlus table并滚动显示 效果类似其实也没啥，代码部分，1、首先使用了elementplus的table<template><div><el-tableref="table1":data="state.data"height="250"><el-table-columnprop="station"label="站点"width="90"align="center"/><
前端开发 vue3实现单点登录 严格来说，所谓利用vue3实现单点登录，是指实现单点登录的前端。身份验证，只能是服务器端干的活。一、原理单点登录，就是一处登录，到处运行。以我现在做的项目为例，该项目有多个子系统，采用微服务架构，各子系统，包括其前端，都是独立开发，独立部署。那么很自然，应当有一个公共登录。只需在这个公共登录模块中登录，那么其他子系统就可以正常使用了。具体流程为：1）当打开子系统时，发现未登录，则转向公共登录，否则
前端开发 vue3 + element plus实现侧边栏 一般前端项目少不了侧边栏。如图所示这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也不知道是哪里的毛病，反而欲速则不达。所以我们之前基于一个空白的vue项目开发，把需要的路由、ajax封
前端开发 vue3动态路由及菜单 一般来说，前端项目中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册。具体如何实现呢？思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。这其中，可能会出现默认路由与动态路由有重叠的情况。处理办法是覆盖。数据结构方面，菜单与路由数据二合一。一、项目结构这是我们一个项目的公共框架的代
前端开发 不依赖框架用vue3空白项目从头打造一个过得去的前端 通过全程参与，可以加深对VUE项目的理解。近期做的一个项目，前端除了UI外，没有使用什么框架。不使用现成的框架是无奈之举，因为找不到合适的。之前用的框架，比较老旧，还是vue2的；新的吧，有学习成本，怕耽误时间，也不知道效果怎么样，存在一定的风险。利用最基本的“空白”项目，按需添加基础功能，代码可控，进度也较有保证，同时还能够消除无框架不会工作恐惧症。现在记录一下心得，以后可以反复使用。记录重点有
