分类：VUE

2020
10-28

vue项目查看vue版本及cli版本的实现方式

查看cli版本，执行如下：vue-V查看vue版本npmlistvue补充知识：vue老项目升级vue-cli3.0问题总结升级步骤1、删除原vue-cli并安装vue-cli3.02、删除新项目中src下的内容，把原项目中src目录覆盖到新项目中3、把router从目录文件夹改为文件，src/router/index.js提高一层变成src/router.js4、我的项目中src已经分为了views和components所以无需修改，如果不是这个结构需要自己区分下5、将原项目的index.html及favicon.ico覆盖到... 继续阅读 >

2020
10-28

Ant design vue table 单击行选中 勾选checkbox教程

最近了解Antdesign设计table单击行选中checkedbox功能，相比于element的@row-click再触发toggleRowSelection，antdesign的api就没那么清晰了，言归正传期望：Antdesigntable单击行选中勾选checkedbox实现：单选：onClickRow(record){return{on:{click:()=>{letkeys=[];keys.push(record.id);this.selectedRowKeys=keys;}}}}多选：onClickRowMulti(record){return{on:{click:()=>{... 继续阅读 >

2020
10-28

Vue-Ant Design Vue-普通及自定义校验实例

这段时间在使用AntDesignVue进行项目的前端部分开发，进行一个记录，分享…AntDesignVueAntDesignVue是AntDesign3.X的Vue实现，开发和服务于企业级后台产品。在GitHub上可以找到几个AntDesign的Vue组件。不过相比较而言，AntDesignVue更胜一筹。AntDesignVue共享AntDesignofReact设计工具体系，实现了所有AntDesignofReact的组件，支持现代浏览器和IE9及以上（需要polyfills）。可以让熟悉AntDesign的... 继续阅读 >

2020
10-28

解决vue打包报错Unexpected token: punc的问题

项目中有一个功能模块是使用Vue写的，然后蛋疼的来了，写Vue的同事走了，今天需要改，懵逼状态啊，这是什么？代码还没看懂，就给我出了一个Exception。记录一下，蛋疼历程。ERRORinstatic/js/app.33254a875dd731a0b538.jsfromUglifyJsUnexpectedtoken:punc(()[./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19]好看不？各种百度啊，有人说，下载新的vue-cli，webpack项目,拷贝.babelrc文件到原项目... 继续阅读 >

2020
10-24

解决vue项目axios每次请求session不一致的问题

1、vue开发后台管理项目，登录后，请求数据每次session都不一致，后台返回未登录，处理方法打开main.js设置：//TheVuebuildversiontoloadwiththe`import`command//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'require('es6-promise').polyfill()importMintUIfrom'mint-ui'import'mint-ui/lib/style.... 继续阅读 >

2020
10-24

解决vue中使用less/sass及使用中遇到无效的问题

一：使用方法在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。先使用npm下载依赖，命令行为'npminstalllessless-loader?save',再在webpack.base.conf.js中添加rules对象：{test:/\.less$/,loader:"style-loader!css-loader!less-loader"}`然后在style标签中添加lang=”less”即可，或者直接引用less文件，或者import一个less文件（如同import一个css文件）。<stylelang="less">//import'.... 继续阅读 >

2020
10-24

vue中是怎样监听数组变化的

我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后，调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的setter，这就会造成使用上述方法改变数组后，页面上并不能及时体现这些变化，也就是数组数据变化不是响应式的（对上述不了解的可以参考这篇文章）。但实际用vue开发时，对于响应式数组，使用push、splice、pop等方法改变数组时，页面会及时体现这种变化，那么vue中是如何实现的呢？通过v... 继续阅读 >

2020
10-24

vue中使用腾讯云Im的示例

在vue中使用腾讯云Im通信时，官方给出的文档及sdk提供的都是es5的写法。我们在vue中使用均需要用es6的方式来改写sdk的js文件及按自己所需要的业务调用对应的api就行了对sdk的js文件改写使用exports方法导出函数。官方原先提供的api不变，只需在外加一层exports方法暴露即可，webim.js里有一处long需要修改(问过腾讯也没给出一个具体的方案),其他不变。在相应需要的地方引入即可例如：webIm的登录遇到的问题：曾经使用过低版... 继续阅读 >

2020
10-24

vue中使用router全局守卫实现页面拦截的示例

一、背景在vue项目中使用vue-router做页面跳转时，路由的方式有两种，一种是静态路由，另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论)二、使用场景静态路由的使用场景：在我们使用静态路由实现页面跳转时，不管我们是否登录，当我们在地址栏修改地址后，页面会发生跳转并展示页面内容（数据并不会被展示出来），这样的问题显然是不能够被接受的；动态路由的... 继续阅读 >

2020
10-24

vue使用video插件vue-video-player详解

本文实例为大家分享了vue使用video插件vue-video-player的具体代码，供大家参考，具体内容如下进入我们的项目文件夹中，并打开命令行窗口，然后进行下面的步骤：1、安装vue-video-player输入命令：npminstallvue-video-player-S2、引入插件在项目的入口文件main.js中引入插件，如下：importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use... 继续阅读 >

2020
10-24

vue-video-player视频播放器使用配置详解

本文实例为大家分享了vue-video-player视频播放器的使用配置，供大家参考，具体内容如下1、安装npminstallvue-video-player-save2、在main.js中添加importVueVideoPlayerfrom'vue-video-player'//视频播放器import'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)3、新建一个vueVideoPlayer.vue组件供调用<template><divid="vueVideoPlayer"><video-playerclass="video-playervjs-custom-skin"ref="videoPlay... 继续阅读 >

2020
10-24

Vue toFixed保留两位小数的3种方式

第一种：直接写在js里面，这是最简单的val.toFixed(2)第二种：在ElementUi表格中使用第三种：在取值符号中使用{{}}定义一个方法towNumber(val){returnval.toFixed(2)}使用{{towNumber(row.equiValue)}}补充知识：vue中提示toFixed不是函数vue中toFixed获取小数点后两位错误提示：.toFixedisnotafunction解决办法：Number(_this.group_cash).toFixed(2)以上这篇VuetoFixed保留两位小数的3种方式就... 继续阅读 >

2020
10-24

vue 如何使用递归组件

有的时候我们会使用二级标题，什么叫做二级标题？先看看传过来的数据。类似于这种，数组中还有一个数组，有的人可能会说那就用两个v-for嵌套使用啊，但是这里，我们想要它们是同样的功能，同样的样式，所以使用递归组件是最好的选择。递归组件：在组件的自身再调用组件的自身。组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。此时就渲染出来了... 继续阅读 >

2020
10-24

vue 如何从单页应用改造成多页应用

最近接到这样一个需求，将之前的三个项目合并成一个，并且要做成后台可配置化，前端动态引入组件的模板化框架。听起来是不是很拗口。。。我自己当时都蒙了。简单分析下需求，就是，项目A/B/C的内容是交叉的，有的页面不同，有的页面和组件是公用的，例如A项目多了个人中心及其里面所有内容（最全的一个项目，但是是放在微信中的，需要获取微信授权），B项目是通用版的项目（也就是说可以放在微信，也可以放在app内，不需要获取授权... 继续阅读 >

2020
10-24

在vue中获取wangeditor的html和text的操作

目的：vue中获取wangeditor的html和text。补充知识：vue-cliwebpack引入wangeditor(轻量级富文本框)1：使用npm下载：//（注意wangeditor全部是小写字母）npminstallwangeditor2:直接在项目模板中引用importEfrom'wangeditor'3：HTML<divid="editorElem"style="text-align:left"></div><buttonv-on:click="getContent">查看内容</button>4：js代码exportdefault{name:'editor',data(){return... 继续阅读 >

2020
10-24

vue项目配置同一局域网可使用ip访问的操作

1、检查package.json文件，scripts.dev设置host改成"0.0.0.0"2、config文件中找到index.js文件的host改成"0.0.0.0"此处的"0.0.0.0"可以改成自己的ip，重启项目就可以了补充知识：@vue/cli创建项目报错ERRORFailedtogetresponsefrom/vue-cli-version-marker的解决方案今天他们遇到一个很有意思的bug，用@vue/cli创建项目的时候报错了，还是个从来没见过的报错：一开始以为是版本问题，毕竟报错信息上写着update，但是cl... 继续阅读 >