vue
关注
分享
扫一扫
console.log( )
吾日三省吾身:这事能不能不干、这事能不能推给别人干、这事能不能明天干。
展开
-
nuxt使用keep-alive
业务场景：列表页进入详情页返回，列表页数据缓存还是进入详情页之前的样子仅有部分页面需要缓存，对需要缓存的页面进行操作大致实现过程：1.nuxt设置keep-alive，需要缓存的页面添加name属性2.通过vuex管理需要缓存的页面/组件3.需要缓存的页面在进入时判断是否刷新数据，离开进行判断是否需要缓存（滚动位置恢复看情况是否需要）....原创 2022-02-14 16:58:49 · 2220 阅读 · 7 评论 -
Cannot read property ‘getBoundingClientRect‘ of undefined
在vue中使用滚动监听，当切换页面时会报错解决方法：在监听滚动页面关闭的时候清除滚动监听beforeDestroy () { window.removeEventListener('scroll', this.handleScrollx,true); },起始我没有在清除函数中添加true参数，在一个帖子中找到了解释（https://segmentfault.com/q/1010000010117564）...原创 2021-06-25 16:41:20 · 2710 阅读 · 0 评论 -
vue中使用scss全局变量
插件版本"node-sass": "^4.14.1","sass-loader": "^7.3.1","sass-resources-loader": "^2.1.1",node-sass和sass-loader默认最新版本，使用时会有各种版本报错上面的版本可用vue,config,js配置module.exports = { css: { loaderOptions: { sass: { data:原创 2021-03-29 18:57:53 · 3590 阅读 · 3 评论 -
vue中css使用data中的变量
封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下) 通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子<template> <div class="home" ref="UI"> <div class="header">hello world.原创 2020-12-04 17:02:01 · 8494 阅读 · 9 评论 -
vue cdn引入一段时间后 在某些浏览器报错
之前为了缩小打包体积，一些东西使用cdn引入，过了一段时间项目在某些浏览器打不开，打开控制台，发现cdn资源错误原因：cdn引入版本与项目版本不符项目中的版本应该是自己更新的，我自己没手动更新过，也可能是领导更的之前用的vue版本是2.5.10版本，cdn引入的也是，现在项目里vue是2.6.11（在package.json查看项目中的版本）更新cdn的版本即可...原创 2020-06-09 16:04:54 · 545 阅读 · 0 评论 -
vue 单个页面中引用多个echarts实现自适应
在vue某个数据展示页面，使用了多个echarts图表，使用onresize方法只能够让最后一个图表随着窗口大小自适应在解决问题的过程中发现的一些问题一、第一种开始我在每个图表组件的方法里面定义myChart，如下methods:{ setchart(){ const option{ } let myChart ...原创 2020-05-08 14:18:37 · 2841 阅读 · 0 评论 -
vue中使用echarts首次加载超出画布
画布大小使用百分比布局，首次加载页面发现echarts图表超出画布范围网上查找了半天资料，其中一种是在图表建立之后使用mychart.resize()方法调整，但我写了没有效果，然后我找了其他几种方法，不知利弊，知道的还请指教1.使用settimeoutmounted() { setTimeout(()=>{ this.hadleGetFilesList...原创 2020-05-07 11:24:24 · 1416 阅读 · 0 评论 -
在vue单页中重复引入同一子组件
如果一个功能服用率比较高，我们一般写成一个公共组件，需要的时候就引入今天遇到一个问题，写了一个城市级联选择器的公共子组件，我在一个页面引入了三个该组件，发现只有一个能够使用，拿代码说事下面代码是我城市选择器的一部分，我将getProvince方法在created中执行，因此只要打开引入该组件的页面，方法中的请求就会发送，结果是三个组件中的其中两个console.log(res) 输出为un......原创 2020-04-23 17:22:10 · 5608 阅读 · 0 评论 -
vue项目打包文件过大优化
有些我是在打包前就做了的，但为了全面一点还是写一写，我用的是vue-cli3 配置文件vue.config.js一、路由懒加载每次进入一个新页面才加载该页面所需要的资源component: () => import('@/view/setting/setting.vue')二、把不常改变的库放到index.html中，通过cdn引入最好引入指定版本，避免更新...原创 2020-04-03 14:28:53 · 1313 阅读 · 0 评论 -
用cdn引入报错 Uncaught ReferenceError:XXX is not defined
今天在压缩打包文件时，采用cdn方式引入vue和vuerouter等在引入vue-router时出现了报错愣是查找了半天，最后发现是变量名字的问题，很无厘头,只能写VueRouter，报错的配置正确的配置 而且下面配置里写不写都可以使用...原创 2020-04-02 15:11:20 · 2207 阅读 · 0 评论 -
vue后台管理页面权限管理
一般后台管理页面会有不同的权限，每个角色拥有不同的查看页面的权限权限实现：用户信息中携带权限页面标识先用账号密码获取到token，token获取用户信息，用户信息中包含了网页需要的内容，一般有姓名、身份、手机号、邮箱，现在多了一个权限页面的数组首先设置路由守卫,跳转页面的时候，首先判断是否有token（身份信息），有token还要判断是否有用户信息，没有就调用函数去获取。rout...原创 2020-03-30 17:19:15 · 725 阅读 · 0 评论 -
vue项目打包上传到服务器具体操作
这几天为了测试一个项目，自己尝试将前端项目打包放置到自己的服务器上，我用的是阿里云，下面也是以阿里云为例使用的工具是xshell6+FileZillaxshell6想免费试用就去下载家庭免费版 >官网下载1.服务器上传服务器，你首先得有个服务器吧，买一个也不贵，或者用公司的2.安装好软件xshell6FileZilla打开xshell左上角新建，先输入...原创 2020-03-27 15:29:30 · 2698 阅读 · 0 评论 -
vue项目在ie浏览器中，数据更改后页面数据没有变化
在项目里对表单数据使用增删改查之后，我们通常会重新请求数据更新视图，ie浏览器中，如果请求相同的URL，默认会使用之前请求来的缓存数据，而不会去请求接口获取最新数据，解决方法：在每个请求发送前，拦截请求并给请求接口的URL后加一个时间戳,这样就保证了每一次请求的URL都不同，ie就会不断的请求接口而不使用缓存数据。也可以在封装axios的时候添加if (config.method...原创 2020-03-26 15:26:58 · 1033 阅读 · 4 评论 -
vue 报错 Module bulid failed (from ./node module/babel-loader/lib/index.js)
类似这样的报错，下载最新版node.js试试原创 2020-01-20 14:55:42 · 514 阅读 · 0 评论 -
vue 中input的输入验证
在vue中用最普通的input对内容做限制比较容易，但是没有样式，比较丑，比如只能输入文字(以下都以文字为例)，直接对其值正则匹配即可 >查看其他匹配的方法<<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"/>但是想要好看一点的就需要使用vue中的...原创 2019-12-10 11:38:53 · 5778 阅读 · 0 评论 -
vue过滤器的使用
很多时候我们从后台拿到的数据格式并不是我们想要的，比如时间，一般后台给的是时间戳，前端需要转化为类似YYYY-MM-NN的形式，如果不是直接渲染数据，还是能够使用moment包去转化，如果是像在表格中这种写法还比较简单，能够对数据直接操作{title: "更新时间", align: "center",key: "updateTime", r...原创 2019-12-09 10:15:21 · 214 阅读 · 0 评论 -
移动端通过携带token访问html页面
项目中有一个页面需要放到移动端，pc端是通过账号密码登录获取token，跳转网页前，在beforeEach中验证是否已有token，但是在移动端就访问这一个页面，为了避免登录就需要直接用token去访问，我是通过?把token拼接在网址后面判断移动端还是pc端，在beforeEach之前判断，这样pc端就不能通过token去访问window.location.href=window.lo...原创 2019-11-28 11:33:27 · 2481 阅读 · 0 评论 -
解决vue-cli3项目ie白屏兼容问题
刚写好的项目在谷歌能打开，ie打不开，需要处理兼容问题先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决如果没有其他问题是可以了的，下面是我代码中出现的其他问题导致页面无法显示或者报错sockjs报错 控制台会一直报这个错，sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工...原创 2019-11-27 10:26:58 · 3368 阅读 · 0 评论 -
vue中刷新页面
当我们页面中有数据发生变化或者进行了某些操作的时候，需要将变化后的结果展示，也就是刷新页面，像F5这种刷新会导致页面闪烁，还有window.reload()，或者router.go(0)刷新时也是，用户体验很差，所以我们需要一种页面不抖动的刷新方式解决办法：第一种适合大多数情况在App.vue中声明一个reload方法<template> <div i...原创 2019-11-25 16:19:52 · 575 阅读 · 0 评论 -
vue打包运行并解决404问题
vue使用npm runbuild就能打包，生成一个dist文件，直接打开index.html是不行的，我们需要将其放到一个容器中1.安装express-generator生成器。npm install express-generator -g2.找个地方创建一个express项目。express name // name是项目名3.进入项目目录，安装相关项...原创 2019-11-22 09:24:43 · 1201 阅读 · 0 评论 -
iview form表单验证手机号
1.直接验证，rules添加phone: [ { required: true, message: "请输入手机号码", trigger: "blur" }, { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" } ],2.自定义验证...原创 2019-11-20 15:51:15 · 2267 阅读 · 1 评论 -
[Vue warn]: Failed to mount component: template or render function not defined.
昨天写项目还好好的，今早上一打开项目页面就进不去，报了这个错原因是我昨天在写项目的时候添加了一个js文件，而之前是只有一个vue文件，在router里引入路径时没有写后缀但是加了js文件后，就无法识别，将后缀加上就好其他原因可能是component路径引入有问题...原创 2019-11-20 10:13:21 · 1340 阅读 · 0 评论 -
iview table组件的嵌套使用
最近使用iview-admin写了一个后台管理项目，对table这个组件使用的比较多，表格主要内容如下图新建和修改操作是使用iview组件 model（对话框）内嵌form（表单），可做表单验证单选、多选、排序、分页、下拉都能通过官网iviewtable查到，这里有些操作用到render函数，我只介绍这些时间戳转化，这是最简单的render函数的应用：首先需要引入momen...原创 2019-11-18 17:16:12 · 1095 阅读 · 0 评论 -
vue中通过render函数给子组件设置ref
正常我们的写法是，这样ref不会生效，h是作用在渲染的时候的，而ref是渲染之后才创建的，因此在h函数中使用ref是无效的。render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } ...原创 2019-11-08 17:03:00 · 1760 阅读 · 0 评论 -
vue从仓库state中取不到数据
今天写项目要从仓库中取出一个值，但我一直取得是undefined，各种测试百度，然而我犯了一个低级的错误我在store文件下又建立了子文件user.js，然后在index.js将其引入然后我直接使用this.$store.state.value去取值，是取不到的，如果index.js文件里的state中也有value这个变量，该语句取到的是index.js中的value值如果...原创 2019-10-29 17:17:48 · 2256 阅读 · 0 评论 -
在vue中使用ajax post请求服务端接收不到参数
参考文章vue使用axios发送post请求，出现错误，服务端无法接收到参数，因为大多数的web服务器只能识别form的post的请求，即请求头Content-Type为’application/x-www-form-urlencoded‘，但是默认是application/x-www-form-urlencoded，所以需要自己手动设置一下，在配置文件的headers修改。正确的参数格式...原创 2019-10-26 16:35:22 · 1681 阅读 · 0 评论 -
import Icons from '_c/icons
iview-admin中import Icons from '_c/icons' 的‘_c’在项目的最外层有配置文件vue.config.js,里面配置了_c为自定义的路径原创 2019-10-24 09:33:20 · 691 阅读 · 0 评论 -
[vue-i18n] Value of key 'xxxx' is not a string!
在使用iview-admin框架编写目录时报了一大堆警告信息，和vue-i18n有关解决方法在项目的locale下的index.js文件中修改配置，让在创建 i18n 示例的时候加上参数去掉这些 warningconst i18n = new VueI18n({ locale: lang, messages, silentTranslationWarn: true})...原创 2019-10-24 09:22:39 · 2701 阅读 · 0 评论 -
vux
创建项目vue init webpack 项目名称加载项目所需环境npm install下载vuxnpm install vux --savenpm install vux-loader --save --dev下载相关包vue-style-loader,css-loader,less,less-loader在main.js文件中引入im...原创 2019-07-22 18:08:51 · 1448 阅读 · 0 评论 -
Vue
一 vue-cli安装教程 https://www.jianshu.com/p/32beaca25c0d在项目目录下下载axiosnpm install --save axios然后 npm install 重新加载node环境二 Vue31.执行npmuninstallvue-cli-g卸载旧版本vue-cli2.执行npmi...原创 2019-07-22 18:08:41 · 231 阅读 · 0 评论 -
运行Vue报错： Error: listen EADDRINUSE: address already in use 127.0.0.1:80
如果本地运行多个vue+webpack项目会报错：Error: listen EADDRINUSE: address already in use 127.0.0.1:80；地址端口已经被占用在后台查找端口，用命令关掉window + R调出命令框，输入netstat -ano找到80端口；输入命令后回车tskill 13076重新输入npm run dev运...原创 2019-08-28 09:49:55 · 3209 阅读 · 0 评论