peade的博客

在经过一番努力查找之后，终于知道到了具体使用方法。文件来获取环境变量，但对于如何配置不同环境的。文件则语焉不详，根本找不到具体使用方法。从上图，可以看出，只要通过设置。等文件来配置环境变量是在。在文档中明确提到支持。

在我的qiankun项目里，往子应用跳转的时候，控制台输出了一段警告。TypeError: Cannot read properties of undefined (reading 'appWrapperGetter')查了很多资料，这个warn不能在控制台中删除。这个应该是qiankun自身的问题。在发生产的时候，打包的时候，把console移除就没有了。...

今天配置vue.config.js, 配置后，启动项目，报了一个错 INFO Starting development server... ERROR TypeError: Cannot read properties of undefined (reading 'upgrade')TypeError: Cannot read properties of undefined (reading 'upgrade') at Server.<anonymous> (/Users/lh

https://i18n.nuxtjs.org/seo文档里根据语言切换html lang的值，// nuxt.config.jsexport default { // ...other Nuxt options... head () { const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true }) return { htmlAttrs: { myAttribute: 'My Valu

input number 类型下，+ - e . 都是允许录入的字符。在一些场景下，我们需要限制用户录入这些字符。vue3 代码示例<template><input type="number" @key.down="handleKey"><template><script setup>function handleKey($event){ if ( $event.code === 'KeyE' || // 禁止 e E $ev

使用vite 创建vue3 的ts项目后，用vscode打开，报了错误vue vite ts Cannot find module or its corresponding type declarations.ts(2307)解决方法：使用项目中的ts版本。VS code 中，F1， "typescript: select Typescript version"， 选择 workspace 下的 typescript 即可...

这是在用 vite+vue+ts 的时候，项目里报出来的。页面里的代码是这么写的<script lang="ts">import settings from '@/settings'export default { setUp() { console.log(settings) return { settings } },}</script>解决方法是在tsconfig.json里改一点东西：{ "compilerOptions": {

个人在开发的时候，有时会需要进行一下数学计算，json字符串格式化等操作。于是就做了个小工具网站：点击访问网站地址

官网多文件缩略图展示示例：链接<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-uplo

在vue里，图片加载错误，显示默认头像问题。我在网上查到了好些解决方法，使用起来感觉都不是特别方便。在这里简单写了一个插件，自己试用了一下，基本没问题。function Install(Vue) { Vue.directive('imgerr', { // 当元素被插入到DOM中时... inserted: function() {}, // 绑定，只调用1次 bind: function(el, binding) { el.onerror = functi

我简单做了个自定义Input组件，记录一下有几个需要注意的点组件内部需要在props里设置一个value，用于接收v-model传入的值在组件内部，通过this.$emit('input', val),把值赋值给v-model相关变量

解决方法来源：How to Re-render a Vue Route When Path Parameters Change方法一：beforeRouteUpdate (to, from, next) { this.lang = to.params.lang; this.setCode(); next();}方法二：<router-view :key="$route.fullPath" />

没有全局安装vue-cli，在项目里配置 了vue.config.js，这个配置是不起作用的。直接运行npm run dev，会默认调起服务,端口号是8080；而全局安装了vue-cli,则能使用上vue.config.js。这似乎应该是常识，我到今天才琢磨清楚。我是有些后知后觉了。...

错误现象代码已经发到服务器上部分机型，特别是iphone手机，偶发或频繁出现Loading Chunk ... failed错误原因分析前端用vue-cli，未做特殊处理，无法确定是否是前端代码问题，假定非前端问题，那么就是服务器配置的问题。总而言之，具体原因未知错误解决router.onError((error) => { // 代码来自于其他人的解决方案，只改了一下正则 const pattern = /Loading chunk .* failed/g const

代码：Vue.mixin({ beforeRouteLeave: function(to, from, next) { // console.log(this.$route) if (this.$vnode && this.$vnode.data.keepAlive) { if (this.$vnode.parent && this...

path 和params 同时使用，会忽略 paramsthis.$router.push({path:'/book', params:{id:'123213'}}) // 这实际上与下面相同this.$router.push({path:'/book'})// 实际访问路径为 /bookpath和query可以同时使用this.$router.push({path:'/book',...

在vue后台管理系统里，页面路由是根据后台返回的数据，动态生成的。一般会在路由守卫beforeEach进行一下路由权限处理。vue-router里追加路由的方法是 addRoutes， 可以通过这个方法，动态追加后台权限给定的路由。添加完路由后，直接走next() 进入页面，我们会发现，进入的实际上是一个空白页面。console.log路由信息时，我们会发现，追加进去的路由，并没有在里面。而实...

vant 里的input输入组件是Field，这个组件没有提供自定义校验的功能，只提供了email等特定几个值的校验。vant自身又没有form相关组件。我们在开发的时候，总是免不了要用户填写表单，进行输入操作，这就免不了要对表单输入的值进行校验。我之前的一篇博文介绍了vant + VeeValid做form表单校验的做法。今天我在开发的时候，发现其实还有一个更简单的方式来实现表单校验的效果...

之前一直使用vant做移动端开发，也都没做到太复杂的表单输入。简单的输入，都是直接弹窗提示就行。这次做的需求，在页面上有许多内容要输入。查看vant文档时发现，vant自带的表单校验功能非常孱弱，Field组件自身也不支持自定义校验。【据vant在git上的开发计划2020年上半年回增加form相关组件，到那个时候，应该就有原生支持了】。网上查了一通，vue进行表单校验的，有个库VeeValid...

在使用Element的时候，用到了Cascade做级联数据操作。在实际项目中，遇到了这样一个需求。需要做一个依赖于外部省分信息的市、区联动cascade。省份信息是从外部传入的，是会动态变化的。根据这个省份信息，实现市、区联动，市、区信息是通过Lazy方式获取到的。在Element的文档里，没有这种使用场景的示例。这种实际应用，就卡住我了。我一开始尝试用$set方法去改变props里的op...

很简单，就是升级element-ui的版本到最新。-----根本原因是vue-element-admin里依赖的element-ui版本有点低了，不支持新的功能特性。-------element-ui的文档里，没有说明功能是在哪个版本里加进去的，有时候，就有点坑。...

在写组件是，我们经常在样式上写上scope，做隔离当我们需要覆盖scope的子组件样式时，可以用&gt;&gt;&gt; 或/deep/深度选择器来操作。&gt;&gt;&gt; div{ background:blue;}// 或者/deep/ div{ background:red;}参考https://www.cnblogs.com/deca...

刚入行不久，就听闻vue大名，慕名不已。就直接接触文档学习了下。无奈当时水平实在太低，没学会。现在终于开始用vue来写项目了，其实差不多4-6个月前，看vue的文档学习后，基本用法都掌握了。但是一直顾虑自己水平不足，新项目工期又紧，就一直没用vue开干。最近因为有迫切的需求，真正开始vue做起项目来，搭配上es6的新语法，做起东西来，确实要比用jquery、angularjs的写法要舒服一...

一、引入JS在index.html页面引入微信开发需要的js二、eslint编译报错，wx undefined在js代码里直接用wx来写代码，会报undefined错误，eslint编译通不过。这个的解决方法有两种，一种是禁止eslint检测  在js最前面加一段注释。 /* eslint-disable */另一种是，用window.wx 代替wx使用三、分享link...

1、根据改变常量我们在开发和生产环境下，ajax请求的地址是不一样的。在打包的时候，要把开发的ajax地址替换为生产的ajax地址。可以去改变config/dev.env.js ， config/prod.env.js 这两个文件，分别在这两个文件里加上ajax地址。这两个js文件里的值，实际上是设置了process.env的值。例如：dev.env.js 'use stri...

在一个组件里，通过props传值进去对象，在控制台打印报错误信息，提示某属性不存在。例如：&lt;div&gt;{{data.param.aaa}}&lt;/div&gt;类似这种的，取对象子级下面的值，就报了undefined。原因应该是在初始传值，最多默认 data={}。我尝试在props里设置好默认值，但是依然报错这么设置的props：props:{ ...

在官方文档里给出了自定义主题的方法，文档地址。文档里没有详细说明怎么配合vue-cli3的写法。我自己在使用的时候，摸索了好一会儿。第一步：设置bable.config.jsmodule.exports = { presets: [ '@vue/app' ], 'plugins': [ ['@nutui/babel-plugin-separate-impo...

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且v-on事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEv...

为什么this.$message不起作用了？今天在使用elementUI的时候，准备使用this.$message来做个消息提示。顺溜地把代码写完了，一运行，发现代码报错了，this.$message is not function看了看，我的代码...import {Message} from 'element-ui'...Vue.use(Message)这么写，好像没错。...

学习完vue的文档，在项目里，结合上animate.css, 我们会这么实现<transition name="page" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <router-view&g...

今天晚上发版，代码上出现了这么一个问题。vue-router Maximum call stack size exceeded出现这个问题的原因在于vue-router 的路由间来回跳转，造成了死循环。解决方法在于检查路由跳转控制方面，是不是出现了死循环。...

在vue-router里，参数分两种，1、动态路径参数；2、查询参数动态路径参数，这需要按路由文档里配置，例如：/user/:username获取动态路径参数时，用 this.$router.params 来获取动态参数值。查询参数路径里的查询参数，不需要在路由里设置，可以直接放在路由里。例如 http://localhost:8000/index.htm#/hello?tes...