vue.js
sing__star
这个作者很懒,什么都没留下…
展开
-
Uncaught TypeError: window.Vue.use is not a functionUncaught TypeError: Cannot read properties of un
浏览器中报错:Uncaught TypeError: window.Vue.use is not a function…Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)…Uncaught TypeError: Cannot read properties of undefined (reading ‘version’)…放个假回来学校,之前项目的网站就崩了,然后报了以上这几个错误,查了.原创 2022-02-16 21:39:32 · 3864 阅读 · 1 评论 -
vue中刷新页面或跳转前一页面
go(-1): 原页面表单中的内容会丢失;this.$router.go(-1):后退+刷新;this.$router.go(0):刷新;this.$router.go(1) :前进back(): 原页表表单中的内容会保留;this.$router.back():后退 ;this.$router.back(0) 刷新;this.$router.back(1):前进...原创 2022-02-10 14:59:04 · 878 阅读 · 0 评论 -
记录webpack3升级webpack4各插件版本以及webpack配置变化
记录webpack3升级webpack4各插件版本以及webpack配置变化针对npm run dev时会出错调整1)依赖插件版本调整先2)针对vue-loader进行webpack配置改造修改 webpack.base.conf.js修改 webpack.dev.conf.js修改 webpack.prod.conf.js针对npm run build出现问题解决error1: 升级extract-text-webpack-plugin插件error2:error3: 使用config.optimizat原创 2021-11-18 01:15:35 · 1333 阅读 · 0 评论 -
阿里矢量图标在vue项目中线上或本地引入以及颜色大小的调整
vue项目中引入阿里图标以及颜色大小的调整阿里图标库生成代码1.去阿里图标矢量图标库将想要的图标添加入库2.再去购物车中将图标添加到项目。3.1将图标代码包下载到本地再引入到vue项目中。3.1.1解压放到assets文件夹下3.1.2 在mian.js中全局引入图标3.1.3 页面中使用3.1.4改变图标大小3.2将图标以线上方式引入项目3.2.1 在index.html中引入资源3.2.2 页面中使用3.2.3 改变图标大小由于在使用element-ui的时候,其图标数量太少,项目需要的又没有;而且原创 2021-08-05 10:34:34 · 3373 阅读 · 0 评论 -
“vue-cli-service“ 不是内部或者外部命令
报错:原因一、 新拉取的项目没有执行 npm install,找不到相关的依赖包(也就是说没有node_modules文件夹)。 解决方法: 执行下 npm install 即可原因二、 项目的依赖包损坏。解决方法: 删除node_modules文件夹, 执行 npm install 重新安装...转载 2021-06-17 20:18:10 · 1322 阅读 · 0 评论 -
各种关闭eslint方法总结
各种关闭eslint方法总结1、package.json关闭eslint2、修改eslint的语法检测,文件为根目录下的 package.json文件(规则写在rules内)3.vue cli关闭eslint1、package.json关闭eslint直接注释掉package.json文件中eslint的配置 "eslintConfig": { "root": true,此项是用来告诉eslint找当前配置文件不能往父级查找 "env": { "node": true转载 2021-06-15 21:03:58 · 25909 阅读 · 0 评论 -
npm run serve和npm run dev的区别
以前做项目要启动项目得输入npm run serve,后来跟着一个视频学,发现启动项目用npm run serve,其实两者关系很简单:就是vue版本的不同导致的以前的vue2.x版本用npm run dev来启动现在的项目用的是vue3.0,所以要用npm run serve来启动同时项目根目录不再有config文件,以前的配置需要新建一个vue.config.js文件里面设置...原创 2021-05-29 00:03:30 · 707 阅读 · 1 评论 -
vue中报错Support for the experimental syntax ‘classProperties‘ isn‘t currently enabled (6:19):
在前端项目中配置websocket时出现下面这个错误解决办法:先在控制台输入:npm i -D @babel/plugin-proposal-class-properties然后到babel.config.js里面加module.exports = { plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]}ok!!!这样就解决了...原创 2021-05-19 00:50:34 · 272 阅读 · 0 评论 -
vue中报错:Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: $ is not defined首先下载jQuerycnpm install jquery --save然后在main.js中import $ from 'jquery'window.jQuery = $window.$ = $这样组件里面的$就可以正常使用了原创 2021-05-09 21:34:34 · 6425 阅读 · 1 评论 -
vue 3.0和vue 2.x中关闭eslink(eslink-loader)的方法
关闭eslinkvue 2.x的关闭vue 3.0的关闭vue 2.x的关闭创建vue项目的时候,手一抖把Use ESLint to lint your code?(Y/N) 选择了Y,然后到写代码的时候,虽然说是浏览器完全能运行结果,但是在cmd就是一直报错。强迫症没有办法。所以大家安装的时候最好选择N.然后项目中就会各种格式报错,很烦人解决:vue项目中关闭ESLint方法:找到build文件夹—>webpack.base.conf.js---->module然后将rules都原创 2021-05-09 14:51:15 · 894 阅读 · 1 评论 -
vue中把String类型转化为int型和int型(整型转化为String类型)---先入为主的惨痛教训
String和int类型的互相转化int到StringString到intint到String// 假设a是整数a = a + ''String到intvar a = parseInt(a);最坑的经历之一,由于在此前从对象中取出某一属性都是String类型的,所以项目中也没有多想。导致我在一次条件判断的过程中,始终执行不了条件体中的内容,这是由于我始终把条件判断是xxx === ’ '这样,结果卡太久了,就想这个取出的xxx会不会是一个整型的数。最最最最主要是的原因是自己没有看数据的Js原创 2021-05-06 19:42:29 · 6942 阅读 · 0 评论 -
Uncaught (in promise) Error: timeout of 5000ms exceeded
解决法一:在main.js里面设置axios法二:如果axios封装到request在做项目的过程中,由于请求的数据量过大,请求超时,所以报这个错,超时的时间5000ms是在配置axios时候设置好的,我们可以通过改这个设置来解决这个错误:法一:在main.js里面设置axios在main.js里面设置axios的超时时间,但是一般都是没有的你要自己设置,然后main.js在你的项目的src下面可以找到,在里面添加上axios.default.timeout=50000,这个意思就是超时时间设置为50原创 2021-05-03 14:19:11 · 14196 阅读 · 0 评论 -
没有Build文件夹的情况下(最新的vue-cli3没有)怎么关闭掉ESlink
这里写目录标题一般的注释掉Build中的方法最新的vue-cli3没有build文件夹怎么办一般的注释掉Build中的方法在build文件夹—>webpack.base.conf.js中注释以下代码和在IntelliJ IDEA工具禁用eslint最新的vue-cli3没有build文件夹怎么办找到项目文件目录下的.eslintrc.js文件,在.eslintrc.js文件中修改:删掉 “@vue/prettier” ,然后重新运行项目npm run dev或则npm run serv原创 2021-05-03 12:48:58 · 1842 阅读 · 0 评论 -
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While r
npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: [email protected] ERR! Found: [email protected] ERR! node_modules/webpacknpm ERR! webpack@"^4.46.0" from the root projectnpm ERR!npm ERR! Cou原创 2021-05-01 21:10:20 · 6621 阅读 · 0 评论 -
vue中页面一些页面配置在文件中具体位置,如网页标签栏的图标名字
index.html网页标签处的图标,名字网页标签处的图标,名字这样的:具体要在puiblic或者直接工程目录下的index.html文件中配置<!DOCTYPE html><html lang=""> <head> <!--link标签里面为图标 title为标题--> <link rel="icon" href="./static/img/logo.jpg"> <title>xxx系统<原创 2021-05-01 11:51:21 · 672 阅读 · 0 评论 -
前端实现对页面或路径的权限管理,对某些用户显示信息,某些用户不给其显示
在页面书写时,我们总会想到权限管理这个东西,比如只有管理员才能看到自己系统的用户信息实现思路实现步骤关键代码实现思路其实很简单,这里我们需要用到的关键元素是vuex,具体是需要用vuex中的全局变量进行判断,决定是否跳转页面,且要实现这个页面的快速跳转。实现步骤首先我们需要建立两个.vue文件,一个是有权限用户能访问的,一个是无权限用户访问到的关键代码// 无权限用户的访问<script>export default { mounted () { // 在页面加载之初判断原创 2021-04-30 09:49:09 · 725 阅读 · 0 评论 -
TypeError: r.indexOf is not a function TypeError: r.indexOf is not a function
查了一些资料,发现是后端传给前端的数据,前端没有处理好所以报错问题:因为我要加载一个列表el-table,需要的数据格式如下// el-table的:data需要的数据格式[{...},{...},...,{...}]// 后端返回的数据格式,我直接返给了:data,这样明显不对,应该包裹一个[]{...}基于此,就是处理数据的方式没对// 比如从后端解构出来一个res对象,只需要[res]或[res.xx]这样即可解决问题// 实例:getUserByName(name).then(r原创 2021-04-30 09:33:56 · 4579 阅读 · 0 评论 -
this.$router.push方法地址跳转了但页面加载有问题,重新刷新才有用的问题
this.$router.push问题分析解决后续问题页面问题:后台报错:分析查了一些资料发现:是使用了keep-alive对组件进行了缓存,而后改用actived生命周期函数,依旧是无效,这大概率是因为当初为了做面包屑导航,使用了嵌套路由的结构:一个路由里面嵌套了Children属性结果就是现在导致返回上一级路由时,不触发actived生命周期函数了。解决当前页面不使用不使用缓存,并且给router-view加上key可以在app.vue里面的<template添加下面的代码原创 2021-04-29 16:42:40 · 3096 阅读 · 0 评论 -
vue版本和[email protected]不匹配问题
后台报错:解决:把版本号改成一样的就行了 npm i vue-template-compiler@xxxxxx --save //xxxxxx为想要的版本号 //例:npm i [email protected] --save原创 2021-04-28 23:19:43 · 2097 阅读 · 0 评论 -
vue写好了一个项目后打包放到django文件下,打开路由不跳转的解决
vue+django,路由不跳转问题路径问题路由懒加载问题查了相关资料,结论是路径问题或路由懒加载问题路径问题vue-cli 2中可以将config中的index.js中的assetsPublicPath改成’./’然后在router的index.js中注释掉// hash: ‘history’,vue-cli 3中需要自己配置config文件在项目根目录下添加vue.config.js,配置如下:路由懒加载问题配置完成后,依然无法切换,检查为路由懒加载问题非懒加载懒加载.原创 2021-04-28 23:12:17 · 746 阅读 · 0 评论 -
vue中实现全屏----插件screenfull.js
全屏功能安装screenfull.js在vue中的使用安装screenfull.jsnpm install screenfull --save// 如果取到的浏览器允许全屏的值为undefind,换下面的语句cnpm install [email protected] --save在vue中的使用<template> <div class="btn-fullscreen"> <!--1.这里使用了elementui的图标,调用方法中的全屏事件-->原创 2021-04-26 10:34:07 · 2088 阅读 · 0 评论 -
npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\package.jsonnpm ERR! code ENOENT n
npm run dev时报错npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\...\Desktop\...系统\package.jsonnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\MZSH\Desktop\时间同步网络系统\package.json'npm ERR! enoent This原创 2021-04-25 17:13:59 · 26823 阅读 · 9 评论 -
通过NProgress来进行页面上方的加载条显示
效果:(网页中得到这样一个加载效果)第一种方法:在项目的路径下启用vue的可视化面板在依赖-运行依赖中输入nprogress来下载(如图)第二种方法,进入nprogress的github.(如图)在命令行下输入npm install --save nprogress1.1没有使用vuex的直接在main.js中输入import NProgress from 'nprogress'import 'nprogress/nprogress.css'然后在你的request和response原创 2021-04-25 10:04:39 · 301 阅读 · 0 评论 -
vue中elementui的el-carousel走马灯轮播图片
轮播图片放在<template中// interval可以调节轮播时间<el-card> <el-carousel :interval="2000" type="card" height="250px"> <el-carousel-item v-for="item in imgList" :key="item"> <img :src="item.img" style="height:100%;width:100%;">原创 2021-04-23 15:22:17 · 3400 阅读 · 4 评论 -
如何在一个页面中显示当前城市的天气
问题:有时候页面太单调了,我们需要显示一些有趣实时有用的东西,天气显示确实是个好东西…问题解决:去网站中生成我们喜欢的样式的天气代码首先我们去这样网站可以直接生成免费的代码iframe,操作过程如图:网站.https://www.tianqi.com/chengdu/?tq放在一个div盒子中,调节样式即可// 在一个div盒子中封装这样的天气iframe<div class="weather"> <iframe name="weather_inc" s原创 2021-04-11 00:45:16 · 625 阅读 · 1 评论 -
vue+echarts中使图表能循环显示tooltip-使用封装tooltip的方法轮询显示图表数据
问题:在做echarts图表时总感觉单纯的一个折线图十分单调,所以思考如何让图标的数据轮询显示?解决:本来echarts的tooltip属性就有这样轮询显示的方法,但是vue结合echarts之后会使这样的方法直接使用存在困难,而且还有鼠标移入移出怎样处理就会提高问题的复杂性,所以我们通过封装一个这样的方法的js文件,在vue中通过引用文件,再调用其方法,我们可以成功实现轮询数据的功能!封装一个tools.js的包// 注意:内容不需要修改,直接创建一个名为tools.js文件,然后将此处复制原创 2021-04-11 00:26:23 · 1287 阅读 · 1 评论 -
element-ui 表格组件 el-table 切换不同表格时或左右滑动时内容偏移的问题
问题:在项目的过程中,一个页面通过按钮切换不同的列表的时候发现有些列不在同一行了,会显得很拉垮,于是网上找了很多解决办法,最初想法也是应该是上一次加载的表格对下一次有影响…那具体是怎么解决的呢?解决:因为v-if 控制el-table-column 的渲染,则在v-if 切换的过程中造成表格数据的偏移, Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key attribute 即可:#直接在拉垮的地方添加一个key<el-table-c原创 2021-04-10 23:54:43 · 1685 阅读 · 2 评论 -
用CSS来实现一些动画在vue中使用之流星滑过(3)
屏幕中的流星效果具体代码:<!--在<template>添加--><!--流星--> <div class="liuxing liuxing1 liuxingFla"></div> <div class="liuxing liuxing2 liuxingFla2"></div> <div class="liuxing liuxing3 liuxingFla3"></div>原创 2021-04-10 22:44:45 · 457 阅读 · 0 评论 -
用CSS来实现一些动画在vue中使用之地球旋转(2)
一个地球元素的旋转效果具体代码:// 在template中添加<div class="dynamicPic"></div>//在style中添加.dynamicPic { /*调节此处来调节圆的高宽,具体怎么布局自己调节*/ width:6.6rem ; height: 5.6rem; background-image: url("../../assets/d.png"); background-size: 100% 100%; padding:原创 2021-04-10 22:38:51 · 999 阅读 · 0 评论 -
用CSS来实现一些动画在vue中使用之几个物体上下浮动(1)
1.三个物体上下浮动的效果具体代码:<div class="center"> <a class="list fn_1 moveUpDownFla1" href="..."> <p>系统一</p> </a> <a class="list fn_2 moveUpDownFla2" href="..."> <p>系统二</p> <原创 2021-04-10 22:31:10 · 768 阅读 · 0 评论 -
el-table表格之下方的内容被外层的div覆盖显示不出来的解决办法
问题:在做项目的过程中,发现表格中本来需要显示10条数据,却只显示了8条如图所示,怎么解决这个问题呢?查了官放文档发现可以通过max-height这个属性来解决…解决办法:<el-table中添加max-height="500px"即可,具体数值多大根据具体项目而定 <el-table :data="userList" border style="width: max-height="500px">添上后的效果:...原创 2021-04-10 20:56:59 · 1918 阅读 · 0 评论 -
element-vue中el-table去除鼠标悬停背景色
问题:在做项目的时候,弄了一个比较炫酷的背景,已经把el-table的背景透明了,但是鼠标移到上面一直有高亮,差了很多文章,但是都不能解决,怎么去掉这样的效果?解决:style样式中添加以下代码:.el-table tbody tr:hover>td { background-color:transparent!important;}.el-table__body tr.hover-row>td { background-color: transparent;}原创文章原创 2021-04-09 22:36:35 · 7396 阅读 · 4 评论 -
前端Nodejs和vue-cli的下载及vue-cli的ui界面使用及一个项目的配置
前端使用的npm命令是依赖于nodejs安装包的,平时经常用npm install --包。但从来不曾想为什么这样?前端Nodejs和vue-cli的下载及vue-cli的ui界面使用nodejs和npm关系node.js安装在工具中使用npm命令出现:npm‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件安装vue-cli脚手架启动vue cli脚手架的ui配置界面创建vue项目并进行基本的配置在vue-cli的可视化面板中安装一些插件和依赖1.安装element-ui(插件)2.配置axios(原创 2021-04-07 19:26:08 · 858 阅读 · 0 评论 -
element-ui中Dialog对话框与其他组件的组合使用
问题场景:有时我们点击对话框时需要对话框中显示我们想要用的内容,而不只是官方示例中的表单或输入框解决:官方文档已经给出对话框可以自定义的用法,以下是我的经验笔记官方给出的现成的示例以及代码:代码:<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisi原创 2021-03-30 11:09:43 · 1840 阅读 · 0 评论 -
vue中清空搜索框(input)之后自动刷新(获取)列表
问题场景:我们在搜索框中搜索完某用户(某商品)后,如何搜索框重新刷新用户列表(商品列表)?解决办法:搜索框中添加一个"x"号,点击重新获取列表搜索出某用户后点击x号清除并重新获取列表核心代码// 把事件换成获取列表的事件clearable @clear="findUserByName(searchName)"代码示例 <div class="search" style="text-align:center"> <span>条件查询</span原创 2021-03-30 10:34:59 · 3873 阅读 · 1 评论 -
vue.js中添加enter键盘事件局部使用和全局使用
vue.js中添加enter键盘事件局部使用和全局使用局部使用全局使用局部使用原生js和vue的input版//js<input v-on:keyup.13="onSubmit">//vue<input @keyup.enter="onSubmit">如果失效://有时候前两种会出现失效,加上 .native 修饰即可@keyup.enter.native="onSubmit"示例:(element-ui中具体使用)// 在组件中使用的示例// 在局部中定原创 2021-03-30 09:55:58 · 1364 阅读 · 0 评论