VueJs
文章平均质量分 53
三知之灵
这个作者很懒,什么都没留下…
展开
-
[vue-router]vue-router 路由传参问题
所以有尝试通过params方式传递参数,但是该种方式参数虽然不会出现在路径上,但是拿不到参数?通过以上代码,发现通过query方式传递参数确实可以拿到数据,但是该种方式会非常容易拿到路径的参数,个人感觉安全性较差,三方拿到数据比较容易。但是实践后发现,哪怕使用了name 方式 依然无法拿到params的参数,然后就说是vue-router的版本问题了,可能最新的版本存在问题。该问题是在希望在代码实现路由跳转的时候,传递一些数据,而且传递数据较多,并存在一些敏感数据。原创 2023-11-08 20:38:38 · 168 阅读 · 0 评论 -
[vue问题]开发中问题集合
“TypeError: Cannot read property ‘Request’ of undefined”这是测试文件的报错,最后发现是因为项目启动的时候就报错了,是其它错误导致的,所以测试文件才会提示这种错误,当启动报错修复后,该问题没有了热加载问题问题描述主要是文件更新后,但是热加载显示加载的文件并没有更新具体描述当src文件夹中的vue文件引入的js文件,修改了引入文件名称的时候例如:index.js文件引入 …/…/mixins/index.js因为mixins中文件名称变化m原创 2023-09-16 23:29:10 · 817 阅读 · 0 评论 -
[vue] filter 指令
【代码】[vue] filter 指令。原创 2023-09-16 23:28:25 · 58 阅读 · 0 评论 -
[vue]本地项目的访问
这个问题的场景是在同一局域网内的另一台电脑想要查看项目,发现默认的不是展示一个本地访问地址,一个IP地址访问地址。原创 2023-09-15 22:50:27 · 418 阅读 · 0 评论 -
[apollo]vue3.x中apollo的使用
[apollo]vue3.x中apollo的使用通过客户端获取Apollo配置环境工具的安装获取Apollo配置相关代码错误提示Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup通过开放接口获取Apollo配置通过不带缓存的Http接口从Apollo读取配置参数说明浏览器方式请求交互方式目原创 2023-02-22 21:12:11 · 1128 阅读 · 1 评论 -
[vue] Vite的使用2-vite.config.ts
vite.config.ts 配置,否则启动打包存在问题。原创 2023-08-05 12:35:11 · 1002 阅读 · 0 评论 -
[VUE 问题]crbug/1173575, non-JS module files deprecated
如果地址相同不应该出现该现象,然后对比两个地址,发现项目自动打开的地址是 0.0.0.0,而项目运行后出现的一个地址是含有 localhost,一个是 ip 地址。一开始以为是项目没有完全启动导致的,但是在项目启动完成后刷新地址仍旧是无法访问的提示,但是从启动的连接处点击打开却能够看到正常项目,但是自动打开的却不行?然后,忽然反应过来,为什么项目自动打开的浏览器地址是 0.0.0.0?突然出现的现象,就是项目启动后,浏览器自动打开的不再是直接运行的项目,而是一个有警告的页面。原创 2023-03-21 20:52:40 · 1500 阅读 · 0 评论 -
[vue问题]Uncaught SyntaxError: Not available in legacy mode
Vue 3 允许您混合使用 Options API 模式和 Composition API模式,Options API 模式也即Legacy mode, 但自 v9 初始版本以来,Vue i18n 不允许混合使用 API 模式,因此您需要根据你的vue3采用的模式来确定Vue i18n 使用哪个模式。因为我的vue的代码使用的是Composition API风格代码, 因此需要设置vue-i8n为Composition API模式。但是vue-i8n的v9.x版本主要是支持vue3.x版本。原创 2023-03-21 20:46:02 · 1097 阅读 · 0 评论 -
[vue] 主题设置
主题设置开发环境"@ant-design/icons-vue": "^6.1.0","ant-design-vue": "^3.2.10","vue": "^3.2.37","webpack-theme-color-replacer": "^1.4.1",@vue/cli-service": "~5.0.8定制主题该功能的实现比较容易,直接在 vue.config.js 文件中,通过配置某些变量就可以非常容易的实现定制化的 UI 特性设置属性 css: { //....原创 2023-03-04 15:54:43 · 1228 阅读 · 1 评论 -
[ant-design-vue ]vue-cli4引入ant-design 报错
错误信息:in ./node_modules/ant-design-vue/es/form/style/index.less Module build failed (from ./node_modules/less-loader/dist/cjs.js):解决方案:1.是less版本的问题,less版本在3.0以上降低less版本:“less”: “^2.7.2”,2仍旧使用le...原创 2023-03-04 15:53:41 · 626 阅读 · 1 评论 -
[vue]加载svg文件之svg-sprite-loader
SVG的显示通过网上方式都没成功,引入路径,总是失败,经过多次的测试终于发现是svg的加载出了问题,记录一下,方便以后的使用SVG的加载工具初始化svg加载工具"svg-sprite-loader": "^6.0.11"配置vue.config.js中配置svg文件的加载module.exports ={ chainWebpack(config) { config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg,原创 2023-03-04 15:49:44 · 1656 阅读 · 1 评论 -
[vue]vue3.x 组合式API不同写法
[vue]vue3.x 组合式API不同写法改进后组合API实际实际使用中的疑问组件名称问题两种写法的优缺点对比优点缺点组合式API,采用了更加灵活的方式,官网推荐的语法糖,但仅限于比较简单的单文件,作为尝试改进后组合API实际实际使用中的疑问改进前组合API的相关写法<script lang="ts">export default defineComponent({ name: "intro", components: { }, setup() { retur原创 2023-03-04 15:46:00 · 644 阅读 · 0 评论 -
[ant-design-vue]-upload组件上传405问题
[ant-design-vue]-vue2.x upload组件上传405问题环境问题描述问题解析http-405问题分析环境使用的是包的版本是:"vue": "^2.6.11""ant-design-vue": "^1.6.5"问题描述在使用ant-design-vue的组件upload的时候,出现了405的报错问题解析在该组件中使用了post方式上传文件,使用了upload组件注意,文件上传不可以使用其它方式,只能使用POST//UI:<a-upload accept=原创 2023-03-04 15:45:25 · 1528 阅读 · 1 评论 -
[ant-design-vue] tree 组件功能使用
[ant-design-vue] tree 组件功能使用描述环境信息相关代码参数说明描述是希望展现一个树形的菜单,并且对应的菜单前有复选框功能,但是对比官网的例子,我们在使用的过程中涉及到对半选中情况的处理:半选中状态:选中子节点中的一个leaf节点后,该节点是被选中的,但是其它节点是未选中的,那么此时父节点 parent1 与parent 1-0 都是半选中状态全选中状态:被选中的子节点leaf是全选中状态;所有子节点都被选中的父节点是全选中状态;所以关于Api中的selectedKe原创 2023-03-04 15:44:49 · 1656 阅读 · 0 评论 -
[vue] Vite的使用
[vue] Vite的使用环境package.json文件变更变更脚手架修改脚本命令index.html 文件htmlWebpackPlugin 替换为 vite-plugin-htmlWe're sorry but vue3.x-vite-ts doesn't work properly without JavaScript enabled. Please enable it to continue.vite.config.ts 文件变更vite-plugin-htmlYou are running th原创 2023-03-04 15:44:06 · 1861 阅读 · 0 评论 -
[pinia]报错信息:getActivePinia was called with no active Pinia. Did you forget to install pinia
在优化vue的过程中,看到目前为止官方推荐的数据管理工具是pinia,而我使用的是vuexpinia的迁移非常快捷方便所以接下来简要说明一下迁移过程中遇到的问题迁移问题getActivePinia was called with no active Pinia. Did you forget to install pinia根据官网迁移后,项目运行报以上错误首先,我在main.ts已经初始化了的import { createApp } from 'vue'import { createPin原创 2023-03-04 15:44:07 · 1445 阅读 · 0 评论 -
[ant-design-vue] table组件列宽拖拽功能
[ant-design-vue] table组件列宽拖拽功能vue2.x 拖动table组件列宽功能环境信息相关代码vue3.x 拖动table组件列宽功能环境信息相关代码vue2.x 拖动table组件列宽功能环境信息 "ant-design-vue": "^1.7.1", "vue": "^2.6.11", "vue-draggable-resizable": "^2.2.0",相关代码<template> <a-table :columns=原创 2023-03-04 15:39:12 · 3166 阅读 · 0 评论 -
[单元测试]vue2.x迁移vue3.x
vue已经从对应的vue2.x迁移为vue3.x,可以参考官方迁移文档遇到的其它问题,记录一下,方便以后迁移遇到问题时查找环境"@vue/cli-service": "~5.0.8","@vue/vue3-jest": "^27.0.0-alpha.3","jest": "^27.5.1","ts-jest": "^27.1.5",迁移问题vue文件中使用了全局注册组件三方组件不是在vue文件中注册的,是全局注册的,所以mount该vue组件文件的时候,提示无法识别三方组件那么三方组件原创 2023-01-15 10:32:21 · 481 阅读 · 0 评论 -
[vue3.x]实战问题--vue2.x升级vue3.x遇到的问题
主要是记录一在使用vue,并且从vue2.x升级版本过程中遇到的问题,方便以后的查找环境升级vue@next脚手架:vue-clivue:2.6.11更新脚手架脚手架如果存在全局安装npm i @vue/cli -g然后在项目中更新@vue/cli-servicenpm i @vue/cli-service -D然后使用vue update查看当前项目需要更新插件(所有脚手架相关插件),一路y更新所有列出的更新运行项目,此时可以正常启动vue 升级package更新npm原创 2022-09-09 16:38:29 · 2580 阅读 · 0 评论 -
[qiankun]微前端实现方案
微前端的实现方案-qiankun2018年 Single-SPA诞生了, single-spa是一个用于前端微服务化的JavaScript前端解决方案 (本身没有处理样式隔离、js执行隔离) 实现了路由劫持和应用加载;2019年 qiankun基于Single-SPA, 提供了更加开箱即用的 API (single-spa + sandbox + import-html-entry),它 做到了技术栈无关,并且不推荐抽取公共方法,工具等,它推荐的是每个微服务是独立的,并且不相互影响的,并且接入简单原创 2022-07-21 13:27:00 · 1841 阅读 · 1 评论 -
[ant-design-vue问题] 报错:Failed to set an indexed property on ‘CSSStyle Declaration’
版本信息如下报错信息设置table的字体颜色不能使用style了ant-design-table:2.x版本设置属性字体颜色时可以customRender:({text, record, index, column}) => { const obj = { children: text, props: { rowSpan: record.rowspan, style: `color:red;`原创 2022-04-23 14:06:45 · 4459 阅读 · 0 评论 -
[vue-ts]ts版本问题合集
[vue插件]ts版本问题合集在使用ts进行代码开发的化,首先要注意以下几点:使用的包添加ts支持例如mockjs添加 @types/mockjs支持(如果存在)或者在shims-vue.d.ts添加声明类型检查报错Parameter ‘b’ implicitly has an ‘any’ type在.eslinttrc.js文件中添加配置很多都无效Argument ‘callback’ should be typed (@typescript-eslint/explicit-module-原创 2022-04-23 13:45:19 · 4063 阅读 · 0 评论 -
[vue]vue笔记
vue指令v-*v-bind:property ==> :property若是绑定的是常量可以直接写property,但是若是property的值如果是对象还是需要写成:layout=“{layout: ‘inline’}”v-once 只是用第一次获取的值v-if 不渲染v-show 一直渲染,只是不展示 display:nonevue单文件同一个vue文件中可以包含lang=“scss”:设定编译的style语言scope:全局范围的样式影响scoped:样式原创 2022-04-23 13:44:19 · 242 阅读 · 0 评论 -
[vue]前端测试
什么是前端测试1.数据模拟与结果预测2.实践模拟与结果或行为预测测试的主要内容测试通用业务组件?业务变更快速,单元测试波动较大。X测试用户行为?用户行为存在上下文关系,组合起来是一个很恐怖的数字,这个交给测试人员去测就好了。X那到底该测什么呢?要测试主要是 功能型组件,vue插件,二次封装的库等等例如断言组件的公共接口,测试用例将会断言一些输入 (用户交互或 prop 改变) 提供给某组件之后是否导致预期结果 (渲染结果或触发自定义事件)组件测试不应该测什么单纯测试组件模板中的 HTM原创 2022-04-23 13:42:52 · 1303 阅读 · 0 评论 -
[ant-design-vue]ant-design-vue的table列合并场景应用
环境“ant-design-vue”: “^1.6.5”,“vue”: “^2.6.12”,table列的展示想要实现合并两列,但是标题不需要合并的场景方式1{//合并两列 dataIndex: "combin", align:'center', fixed:'left', scopedSlots: { customRender: "combin", title: 'combintitle' }, width: 200,原创 2022-04-22 00:37:00 · 1854 阅读 · 1 评论 -
[ant-design-vue]ant-design-vue的table列宽设置问题
table表格宽度问题<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title> </head><body><table border="1"> <colgroup width="200"> <col width="100"></col> <c原创 2022-04-22 00:36:33 · 7959 阅读 · 0 评论 -
[vuex]状态管理vuex
vuex状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成到了官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象原创 2022-04-22 00:35:27 · 1684 阅读 · 0 评论 -
[vue]计算属性computed
[vue]计算属性computedprops: [ "groups",],data() { return { visible: false, size: 'small', };},computed:{//添加对应的 map "mapGroup":function(){ let list=[]; console.log(this.size); this.groups.map(item=&g原创 2022-04-07 15:40:30 · 334 阅读 · 0 评论 -
[vue] directives指令
[vue] directives指令指令应用directives.jsexport default { bind:(element)=>{ element.style.position="absolute" element.style.bottom="5px" element.style.right="5px" }}script:import directives from "../ directives原创 2022-04-22 00:33:22 · 2287 阅读 · 0 评论 -
[vue]组件之间通信
[vue]组件之间通信parent.vue<child id="" name="" to="" @give=""></child>子组件接收父组件传值子组件可以设置接收props的属性类型,校验等不确定属性类型:可以设置为nullprops: { to: { type: String, required: true }, id:null, name: { type: String, va原创 2022-04-22 00:32:51 · 107 阅读 · 0 评论 -
[vue]国际化功能的实现
[vue]国际化功能的实现通过语言的选择,使得网页展示内容为对应的语言UI组件使用的是ant-design-vue,直接使用它的国际化组件,用于实现ant-design-vue各组件的国际化;第一次实现国际化的功能时直接使用了 ant-design-vue的国际化组件,标签没有起作用在真正的使用过程中绕了很多弯路,这里记录一下,方便以后查找环境:"vue": "^3.0.0" "ant-design-vue": "^3.1.0-rc.5"ant-design-vue的国际化这个主要是引入原创 2022-04-22 00:31:53 · 3878 阅读 · 0 评论 -
[vue]echarts的使用问题
可以直接按照官网的方法使用官网的例子是个 PieChart ,而在实践过程中使用的是个 BarChart发现 PieChart 可以正常展示,但是 BarChart 的渲染存在问题,对比后发现options 比Pie多了一个配置项xAxis/yAxis,猜测是缺少相关的组件引起的因为官网内容不全面,只能到本地node_modules模块查看所有的echarts/components,并测试,最终发现是 GridComponent 组件import VChart from "vue-echart原创 2022-04-19 13:34:52 · 545 阅读 · 0 评论 -
[vue]插槽slot
[vue2.x]插槽slot主要是用于占位,并在占位的位置展示指定的内容插槽分为具名插槽与默认插槽,根据使用情况选择对应的插槽vue中<slot> 元素作为承载分发内容的出口组件中没有添加插槽若是组件模板中没有添加插槽,则组件实例中的内容会被作废<!-- todo-button 组件模板 --><button class="btn-primary"> Create a new item</button>实例<todo-butt原创 2022-04-07 11:16:10 · 281 阅读 · 0 评论 -
[vue3.x]ref的使用
[vue3.x]ref的使用普通的应用DOM 元素将在初始渲染后分配给 ref因为 ref 本身是作为渲染函数的结果而创建的,在初始渲染时你不能访问它们——它们还不存在!表单的主动提交场景描述,将form表单设为组件,在父组件中,通过点击按钮,弹框modal 显示表单,点击modal的时候提交表单,因此需要代码控制点击modal提交按钮的时候提交form表单form组件self-form.vue<a-form ref="formRef"></a-form>s原创 2022-04-15 02:49:02 · 1403 阅读 · 0 评论 -
[vue2.x]ref的使用
动态赋值问题this.$refs[name]直接使用有问题this.$refs[`${this.name}`]或this.$refs[this.name]千万注意动态赋值的时候,使用的值通过this获取通过ref调用子组件的方法使用场景子组件中包含form表单 ,想要在父组件中使用form表单的验证方法子组件a.vue<a-form-module><a-form-model-item></<a-form-model-item><a-fo原创 2022-04-15 02:48:33 · 908 阅读 · 0 评论 -
[@vue/cli]@vue/cli升级问题
@vue/cli升级问题升级@vue/cli 4.5.13 ==> 5.0.0-beta4一般在大版本发生变化的时候,就意味着可能出现无法兼容的问题,因此一定要提前备份代码以防之后无法找回可运行代码@vue/cli在升级大版本的时候发现项目完全无法启动了,看到错误提示说是wepack的支持版本都变了,所以感觉直接升级package.json是不可行的了所以采用使用脚手架直接生成一下项目看一下区别,感觉在package.json中没有特别需要变化的地方经过多次测试发现问题出在 vue.conf原创 2022-04-15 02:47:20 · 773 阅读 · 0 评论 -
[@vue/cli] preset 设置的启动、保存与删除
每次初始化的时候,都会有预设选项,预设是选择我们项目需要的初始化构件除去默认的预设,通过Manually select features 可以手动选择初始化的构件,并且此次手动选择项目初始化的时候的预设是可以保存的,但是当误操作导致的保存过多就有点不清爽了,我们需要的仅仅是常用的预设通过vue-cli创建vue项目,将会启动预设选择功能预设保存位置一般是在C:\Users\用户\文件夹下的文件.vuerc中保存预设的保存文件 – .vuerc{ "useTaobaoRegistry":原创 2022-03-31 17:46:51 · 867 阅读 · 0 评论 -
[webpack问题]TypeError: __webpack_require__(...).context is not a function
相关代码const localesFolderReg = new RegExp(/(mock)_?([A-Z]*)?.ts$/,“g”);require.context("…/views",true,const localesFolderReg );报错信息TypeError: webpack_require(…).context is not a functionat importAllMocks (mock.ts?61ca:28)at eval (mock.ts?61ca:40)at Mo原创 2021-10-27 18:02:16 · 5831 阅读 · 0 评论 -
[vue问题]模块““../../../node_modules/vue/dist/vue“”没有导出的成员“onMounted”。ts(2305)
类似这种报错网上的方法大多是在shims-vue.d中添加声明,但是没有效果,甚至考虑了是不是ts版本没跟上问题,直到我使用的版本都到vue 3.2.31还有这个问题…终于觉得无法忍了然后找到了比较靠谱的解决方案,说是vetur的问题,有的说是装的veture版本过多,但是本人只安装了一个版本我报错的版本是vetur v0.31.0然后几次更新安装后发现版本是v0.31.0 并没有更新,最终是通过vscode更新后重装了vetur扩展插件,v0.35.0然后上述问题都没有了...原创 2022-03-03 17:14:53 · 3134 阅读 · 3 评论 -
[vue]全局配置
方法1目前网上的全局设置大部分都是设置app.config.globalProperties.$axios= instance然后再setup()中import { getCurrentInstance } from "vue";{ctx}=getCurrentInstance();ctx.$axios但是该方法存在一个问题就是ctx也是是vue2中的this,在本地正常,线上会有意想不到的问题方法2const app = Vue.createApp({});app.provide(原创 2022-04-15 02:32:47 · 892 阅读 · 0 评论