![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
hongc93
这个作者很懒,什么都没留下…
展开
-
Vue3 [@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ,它们具备完整的类型推断并且在 <script setup> 中是直接可用的.警告信息本身意思是:在 <script setup> 中 直接使用。1、import 中去掉 defineProps。,不需要再import。原创 2023-12-26 15:24:36 · 1425 阅读 · 0 评论 -
Element Radio组件 点击取消选择
有两个选项A、B 只能选择一个 单选按钮组组件无疑附加需求:当再次点击按钮组选中项时 取消选择。原创 2022-09-28 17:12:59 · 1414 阅读 · 0 评论 -
element el-table表格的多选删除
element表格多选后删除。原创 2022-08-08 15:44:17 · 1913 阅读 · 0 评论 -
vue element 可编辑表格行内验证
在实际使用中经常会遇到table表格可编辑提交数据时需要进行相关字段的验证,这种需求很常见,记录很重要。原创 2022-07-29 16:42:48 · 2633 阅读 · 0 评论 -
npm run dev启动项目报错 document is not defined
npm run dev启动项目报错 document is not defined 难解之题给项目中request.js单独引入了element-ui下的Message组件,就给我报错 截图如下:原因是什么?未解 知道的大侠可以帮忙解惑下,谢谢网上各种查 也没个具体说法但是如果就是非要弹出组件 可以用下面的方法............原创 2022-06-22 16:05:40 · 1915 阅读 · 0 评论 -
vscode 实现组件之间的跳转
1. 安装 vetur 和 vue-helper 两个插件2. 打开设置 --> 扩展 --> vue helper, 然后在右边找到在 settings.json 中编辑,点击,添加或修改下面的配置: "vue-helper.alias": { "@": "src" }, "vue-helper.componentPrefix": { "alias": "@", "path": "src" } ...原创 2022-02-09 10:56:46 · 3317 阅读 · 1 评论 -
VSCode报错Vetur can‘t find ‘tsconfig.json‘ or ‘jsconfig.json‘的解决方法
原因Vetur 0.31.0版本新增了一个vetur.config.js的配置文件,在这个版本之后,会优先查找项目中是否配有tsconfig.json(ts项目)或者jsconfig.json(js项目),没找到这2个文件就去找vetur.config.js,如果都没有,就会抛出这个提示。说明VSCode的JavaScript支持可以在两种不同的模式下运行:文件范围(没有jsconfig.json)在此模式下,在VSCode中打开的JavaScript文件被视为独立单元。原创 2022-02-07 17:08:08 · 22257 阅读 · 2 评论 -
vue项目页面 scrollTop ==0 的玄学问题
背景: 公司需求做个vue 跟随屏幕滚动导航目录 感觉很简单.监听scroll事件然后取scrollTop值就可以吧但是无论怎么方式document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop绑定事件window.addEventListener('scroll', this.onScroll,true)都没有效果,打印输出的scrolltop为0求度娘显灵。。。原创 2022-01-13 17:09:03 · 264 阅读 · 0 评论 -
vue项目运行时报Cannot read property ‘upgrade’ of undefined
报错如下图解决方法就是让target字段不为空,就可以运行起来了要是因为在vue.config.js中使用了跨域代理 , 如下图所示原创 2022-01-11 15:02:51 · 344 阅读 · 0 评论 -
vue-cli3安装 配置jQuery
vue-cli3.0 没有了 webpack.config.js 配置文件,取而代之的是集合在 vue.config.js文件 内进行配置默认已经安装好vue-cli3.0项目step1:命令行工具,进入项目文件夹,执行: npm install jquery --savestep2:提示安装成功后,在package.json 文件内的 "dependencies"中检查是否有 "jquery": "^3.3.1", (如没有 则需手动添加):step3:.eslintrc.js 文件中,e原创 2022-01-11 10:57:34 · 384 阅读 · 0 评论 -
vue中设置背景图片的方式
直接上代码方式一:HTML<div class="login" :style="{'backgroundImage':'url('+loginBg+')'}"></div>JSdata() { return { loginBg: require('assets/images/login-bg.png'), }}方式二:HTML<div :style="loginBg"> <div>JS原创 2021-12-01 17:03:01 · 1259 阅读 · 0 评论 -
vue使用@路径引入 vue.config.js配置
项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。首先,先确定项目中是否有path模块:如果没有path模块需要先安装pathnpm install path --savevue.config.js配置const path = require("path");function resolve(dir) { return path.join(__dirname原创 2021-11-29 17:18:03 · 1226 阅读 · 0 评论 -
vue 页面mounted created函数不执行的问题及解决方法
背景:最近做项目碰到一个很头大的问题 第一次跳转页面没有问题 返回去后在点击跳转就不执行created 和mouted钩子函数里的方法记录下以后别忘了解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当在项目中引入keep-alive的时候,页面第一次进入,钩子函数的触发顺序created -> mounted -> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。我们知道 kee原创 2021-11-05 16:25:14 · 14175 阅读 · 4 评论 -
修改element默认样式
假如要修改默认样式名为el-form-item__content/deep/ .el-form-item__content { margin-left: 0 !important; }如果报错修改为 ::v-deep .el-form-item__content { margin-left: 0 !important; }报错解决!原创 2021-09-17 16:34:26 · 1678 阅读 · 0 评论 -
vue3+vite2.X引入element-plus
安装elementnpm i element-plus@1.0.2-beta.28全局引入main.js文件修改 import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import router from '@/router'import 'element-plus/lib/theme-chalk/index.css';const app原创 2021-09-14 15:12:52 · 527 阅读 · 0 评论 -
[Vue warn]: Do not use built-in or reserved HTML elements as component id: aside
解决方式:把name名称命名改掉 把name名称删除或注释掉即可原创 2021-09-11 16:22:11 · 308 阅读 · 0 评论 -
码云新建仓库并在本地初始化项目
一、创建仓库点击右上角“+” “新建仓库”然后依次输入 提交 进入下个页面二、本地初始化首先,你需要执行下面两条命令,作为 git 的基础配置,作用是告诉 git 你是谁,你输入的信息将出现在你创建的提交中。 git config --global user.name "你的名字或昵称"git config --global user.email "你的邮箱" 在你的需要初始化版本库的文件夹中执行 git init git remote add origin <...原创 2021-09-07 14:35:42 · 456 阅读 · 1 评论 -
elementui select选中值 对象
<el-select v-model="value" multiple filterable placeholder="请选择" value-key="code" @change="onChange"> <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item"></el-option> </el-select>option.原创 2021-07-06 16:58:50 · 237 阅读 · 0 评论 -
Object.assign的用法和注意点
Object.assign可以实现对象的合并。它的语法是这样的:Object.assign(target, ...sources)Object.assign会将source里面的可枚举属性复制到target。如果和target的已有属性重名,则会覆盖。同时后续的source会覆盖前面的source的同名属性。⚠️Object.assign复制的是属性值,如果属性值是一个引用类型,那么复制的其实是引用地址,就会存在引用共享的问题。栗子:obj1: {name: 'name1',age: 1.原创 2021-03-17 16:24:57 · 384 阅读 · 0 评论 -
exports is not defined
问题原因:@babel/runtime 最近更新到了 7.13.x,有较大改动,引起兼容问题目前已经更新 preset,对已经安装了新版本 @babel/runtime 的用户提供以下两种解决方案:一、回退 @babel/runtime 版本删除 node_modules 目录和 package-lock.json 文件,在 package.json 文件中增加开发依赖 "@babel/runtime": "~7.12.0",执行 npm install 重新安装依赖即可二、修改 bab..原创 2021-02-26 15:47:02 · 2124 阅读 · 0 评论 -
element el-date-picker daterange 限制选择日期 只能选择30天内 不能选择的置灰
效果图:<el-date-picker v-model="valuePicker" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" :picker-options="pickerOptions" start-placeholder="开始日期" end.原创 2020-12-23 10:12:59 · 3908 阅读 · 0 评论 -
vant picker confirm事件
背景:页面中表单中有多项点击弹出的picker且picker columns值不同,点击picker确定按钮给相对应的变量赋值。问题:点击确认按钮时设置对应v-model变量变量值解决方法:根据 refs 来获取组件的title值给变量赋值相应代码:<template> <div class="apply_dialog"> <van-form> <van-field readonly .原创 2020-11-26 15:50:15 · 7977 阅读 · 2 评论 -
vue页面报错 Avoid mutating a prop directly since the value will be overwritten
大致意思就是说:不能直接去改变props的值,因为这个值在父组件重新render的时候有可能被改变。所以我们需要用基于props的data或者computed属性来fix这个问题。后面这一句解决方案听不懂也没有关系,下面我们用一个小demo来说明这个问题。父组件<mp-dialog :step="step"> </mp-dialog>子组件 js文件Vue.component('mp-dialog', { template: '<button @cli原创 2020-11-25 16:41:58 · 1918 阅读 · 3 评论 -
vue-cli3 跑项目时 ‘98%’ after emitting CopyPlugin
下午改了个路由项目就卡在这了,也不报错,就是服务不运行,重跑也不行,最后找到问题了,记录下问题解决办法:路径不能为空,另外页面图片如果是require的话 路径也不能为空原创 2020-11-25 16:30:46 · 1001 阅读 · 0 评论 -
vant (Popup)中使用sticky
在Popup实现sticky固定在头部<template> <div class="collect_pop" ref="container" > <van-popup v-model="showCollect" lock-scroll position="bottom" :style="{ height: '40%',width:'100%' }" > <v原创 2020-11-24 16:06:09 · 2065 阅读 · 0 评论 -
vue页面使用其他文件数据
在项目中我们经常会把一些公用的常用的数据放在一个文件里,那么其他vue或者js文件怎么引用这些数据呢?如下:公用数据文件// 担保类型let guaranteeType = [{ text: '抵押', value: '01' }, { text: '一般保证', value: '03' }, { text: '信用', value: '04' }, { text: '其他', value: '06' }原创 2020-11-11 15:15:17 · 3185 阅读 · 0 评论 -
vue 路由参数值改变 刷新页面
路由配置{ path: '/hjr2/commonPage/:id/', name: 'CommonPage', component: () => import('../components/commonPage') },关键是 :id的配置跳转that.$router.push({ name: CommonPage, params: { type: 'f原创 2020-11-05 09:58:26 · 1776 阅读 · 0 评论 -
vuex项目实例
一、简介我们来看看对Vuex比较专业的介绍:Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简而言之,Vuex采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照Vuex提供的方式来修改(不能自己随意用自己的方式来修改)。二、优点Vuex状态管理跟使用传统全局变量的不同之处:1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它转载 2020-10-20 14:47:18 · 842 阅读 · 0 评论 -
vue-router的push和replace的区别
1.this.$router.push()描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。2.this.$router.replace()描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。3.this.$router.go(n)相对于当前页面向前或向后跳转多少个页面,类似window.history.go(n)。n可为正数可为负数。正数返回上一个页面.转载 2020-10-13 16:51:35 · 844 阅读 · 0 评论 -
Vue 内容页文本 “ \n ” 的换行问题
1、推荐<div style="white-space:pre-wrap;">{{conTxt}}</div>conTxt:"测\n试\n以\n下"原创 2020-10-13 14:18:22 · 1555 阅读 · 0 评论 -
2020-10-10 Vue 动态组件 传参
<template> <div id="app"> <component :is="currentView" v-bind="componentProps"></component> <button @click="changeView('A')">切换到A</button> <button @click="changeView('B')">切换到B</button> <but.原创 2020-10-10 17:15:25 · 495 阅读 · 0 评论 -
Promise用法及使用案例
想了解更多方法请参考阮一峰老师的教程:http://es6.ruanyifeng.com/#docs/promise1.Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resol.转载 2020-09-30 17:16:58 · 106 阅读 · 0 评论 -
Non-nested routes must include a leading slash character. Fix the following routes: - JSExpression
出错点Non-nested routes must include a leading slash character. Fix the following routes:非嵌套路由必须包含前导斜杠字符{ path: '/JSExpressionTest', name: 'JSExpressionTest', component: () => import('@/components/JSExpressionTest') }...原创 2020-07-06 16:55:09 · 5724 阅读 · 0 评论 -
vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go .microsoft
创建Vue项目出错,提示vue : 无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 ...以管理员身份运行PowerShell 执行:get-ExecutionPolicy,回复Restricted,表示状态是禁止的 执行:set-ExecutionPolicy RemoteSigned 选择Y全是注意:一定要以管理员的身份运行PowerShell,不是cmd窗口!...原创 2020-05-25 11:03:57 · 2472 阅读 · 0 评论 -
vue router点击自身报错即解决相同路径跳转报错
点击没问题 如果再这个页面 再点击一次这个页面的导航 router-link 就会报这个错 但不影响功能引用vue-router的页面添加一段代码import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return or..原创 2020-05-11 12:06:09 · 374 阅读 · 0 评论 -
VS Code红色波浪线报错处理
VS Code红色波浪线报错处理VS Code编辑器:当移动到红色波浪线下边出现如下问题:既然不是语法问题,那可能就是编辑器设置上or插件问题:经过查阅资料,发现改一下我们的用户设置就可解决这个问题:在用户设置中加入下列一行代码成功完成"python.linting.pylintArgs": [ "--generate-members" ],...原创 2020-05-04 14:06:21 · 2337 阅读 · 0 评论 -
vue+webpack项目中 src属性里@和波浪线~
打开build文件夹下的配置文件webpack.base.conf.js中设置别名 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': resolv...原创 2020-05-03 17:00:56 · 1133 阅读 · 0 评论 -
VSCode 新建vue文件 自定义模板并添加注释
每次新建一个vue文件!都要重行敲打一遍template。script。style。烦!设置自己默认的模板!解决有的!前提VSCode安装了vetur先安装Vetur扩展 让 VSCode 支持.vue的扩展名 然后 菜单栏 -文件 - 首选项 - 用户代码片段 输入vue点击进行设置-把下面的代码片段放入里面// Place your snippets for V...原创 2020-05-02 22:31:41 · 1331 阅读 · 0 评论 -
vue+elementUI标签里面 三元运算符的运用
最开始用v-if和v-else,感觉代码冗余。用{{}}语法写三元运算符又总是报错尝试几种写法后,以下为准确写法<el-input :disabled="(dialogType)=='edit'" placeholder="请输入姓名" v- model="addCustomForm.name" ></el-input>...原创 2020-04-17 19:57:36 · 7805 阅读 · 0 评论 -
Vue-router 报NavigationDuplicated的可能解决方案
出现这个问题,控制台会报[NavigationDuplicated{_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。如果你仔细观察并复现了多...原创 2020-03-25 14:14:02 · 312 阅读 · 0 评论