vue
韩大璐
大璐出奇迹~
展开
-
匹配内容高亮
拿到匹配到的内容,给匹配到的内容加上标签样式去替换原文本里的这段内容;原创 2022-10-18 22:21:49 · 205 阅读 · 1 评论 -
【vue】vue-devtools安装使用
vue-devtools安装使用安装配置使用安装配置github下载安装包 https://github.com/vuejs/vue-devtools在这里插入图片描述yarn配置devtools,使用npm配置遇到一些问题,最后还是决定使用yarn配置若没有安装yarn,首先全局安装yarnnpm install -g yarn使用前建议切换淘宝镜像yarn config set registry https://registry.npm.taobao.org --global原创 2021-12-22 12:50:28 · 629 阅读 · 0 评论 -
vue项目页面嵌入代码块vue-prism-editor
需求:1. 可输入代码,并且代码语法高亮2. 支持编辑和不可编辑模式3. 提交到后端到代码内容为字符串格式实现在gitbug上找到vue-prism-editor,可以满足以上需求。使用安装vue-prism-editornpm install vue-prism-editor由于vue-prism-editor需要依赖 prismjs,所以还需要安装prismjsnpm install prismjs在需要使用vue-prism-editor的组件中引入import原创 2020-10-30 11:26:37 · 3642 阅读 · 1 评论 -
vue项目部署到线上报 Uncaught SyntaxError: Unexpected token ‘<‘
Bug描述:该项目作为一个平台的子平台存在,根据nginx路由分发实现路由跳转。在从主平台跳转到该子平台的时候,页面一片空白,在控制台有3个报错,报错内容均为:Uncaught SyntaxError: Unexpected token ‘<’点开报错详情,发现文件类型为XXX.js文件,实际内容为一个html文件此类型错位一般为期待一个js文件,实际返回一个html文件导致解决方式:查看引用外部文件的路径是否正确vue-cli默认build后的文件格式为:js/[name].[ch原创 2020-10-23 11:22:15 · 4761 阅读 · 0 评论 -
vue文本比较插件
安装npm install codemirrordiff-match-patch diff-match-patch使用 <div id="view"></div><script> import CodeMirror from 'codemirror' import 'codemirror/lib/codemirror.css' import 'codemirror/addon/merge/merge.js' i...原创 2020-10-15 10:53:34 · 3841 阅读 · 12 评论 -
vue使用this.$parent.变量名获取父组件的数据得到undefined
我们知道在子组件中可以通过this.$parent.数据this.$parent.方法 主动获取父组件的数据和调用父组件的方法。但是在工作中,我们经常会遇到使用 this.$parent.数据 获取父组件的数据 得到undefined的情况,如下:这种问题往往是由于父组件在调用子组件的时候,在子组件的外层包裹了一层UI组件的某个组件看下父组件调用子组件的代码: <template> <Modal v-model="applyStatus"原创 2020-10-14 17:15:04 · 8641 阅读 · 5 评论 -
vue在mounted中获取元素宽度不准确的问题
遇到这样一个问题:在组件mounted生命周期中获取类名为newForm元素的宽度 mounted(){ this.formWidth = document.querySelector('.newForm').offsetWidth console.log('formWidth',this.formWidth) },审查元素发现,元素的宽度为1695但是控制台打印输出的一直都是1890查资料发现可能是页面没有完全渲染完毕就去获取了元素的宽度加个延迟原创 2020-07-08 16:08:09 · 4786 阅读 · 0 评论 -
iview自定义表单校验规则
export default { data () { return { rules: { NodeNameCH: [ {required: true, message: '中文名称不能为空', trigger: 'blur'}, {validator:(rule, value, cb)=>{this.isNodeNameExist(value, cb)}, trigger: '.原创 2020-05-14 19:19:18 · 2971 阅读 · 0 评论 -
vue数据更新页面没有及时同步解决方案
我们在项目中经常会遇到数据更新了,但是视图并没有发生改变。尤其是引用类型的数据。解决方案Vue.set( target, propertyName/index, value ).sync修饰符原创 2020-05-13 13:33:59 · 5529 阅读 · 0 评论 -
vue使用Better-scroll模拟原生滚动效果
在开发诸如此类有滚动区域的页面时,虽然页面外层盒子自动被撑开也可以实现滚动效果,但是滚动难免显得有些生硬。我们可以使用 better-scroll 这个插件模拟原生滚动效果,使滚动看起来更柔和一些。安装better-scrollnpm install better-scroll --save在项目中引入better-scrollimport BScroll from 'bet...原创 2020-03-18 17:09:46 · 620 阅读 · 0 评论 -
webpack-dev-server代理请求配置
在做项目的过程中,本地请求地址和线上请求地址有的时候会有一些出入。为了避免在项目上线之后要改动很多请求地址,我们使用webpack-dev-server统一做一个代理。本地mock数据在 /static/mock/ 这个路径下想要访问 /static/mock/index.json,我们的路径就应该写成axios.get('/static/mock/index.json')但如果在线...原创 2020-02-24 16:47:30 · 2510 阅读 · 0 评论 -
vue项目配置路径别名
在 build–>webpack.base.conf.js 文件中找到以下代码,在alias中添加即可resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') }},...原创 2020-02-20 13:49:41 · 1106 阅读 · 0 评论 -
vue项目打包后css背景图片路径不对问题
解决办法为:只需要在build/utils.js文件中添加如下一行代码即可。publicPath:'../../'原创 2019-08-08 16:36:55 · 854 阅读 · 0 评论 -
本地运行vue dist文件
vue打包命令 npm run build运行这个命令会在目录中生成一个dist文件夹在服务器部署vue项目只需要把这个文件夹给后台就可以了但是打包之后我们需要在本地先自测一下,下面就是踩过的一些坑:静态资源路径问题——空白页面解决方法:打开脚手架的config文件中的index.js文件,把build对象内的assetsPublicPath(发布路径)改为"./"。默认的情况下是...原创 2019-08-08 16:33:33 · 17590 阅读 · 3 评论 -
vue打包后的dist文件在IE浏览器中打不开(空白页面)
下载安装 babel-polyfillnpm install babel-polyfill --save-dev安装成功之后在package.json中有了这个依赖包在main.js文件中引入babel-polyfill改动webpack.base.config.js将entry中的app: './src/main.js’配置改为:app: [‘babel-polyf...原创 2019-08-08 15:02:16 · 2480 阅读 · 0 评论 -
vue实现PC端分辨率适配
依赖项目基础配置使用 vue-cli 生成自适应方案核心: 阿里可伸缩布局方案 lib-flexiblepx转rem:px2rem,它有webpack的loader px2rem开始先使用vue脚手架初始化一个webpack项目vue init webpack 项目名项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loade...原创 2019-07-25 16:12:23 · 121438 阅读 · 153 评论 -
vue使用vue-awesome-swiper轮播图不能正常滚动
在使用vue-awesome-swiper插件写轮播图的时候遇到上图的问题。问题描述:这是一个画廊(图片相册查看大图)功能,在父组件中调用这个个轮播图的子组件,并且在父组件中控制画廊组件的显示隐藏。功能都写好之后,发现这个子组件显示出来以后不能顺畅滑动。解决方案:在初始化轮播图的时候加上这两个配置项: observeParents: true, observer: tr...原创 2019-01-08 13:26:40 · 3044 阅读 · 0 评论 -
vue使用vue-awesome-swiper实现轮播图
下载vue-svue-awesome-swiper为了更稳定不建议使用最新版本npm install vue-awesome-swiper@2.6.7 --save在main.js中全局引入并使用这个插件,同时也要引入插件的css文件import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/...原创 2019-01-03 11:45:16 · 2300 阅读 · 2 评论 -
vue中使用iconfont字体图标
在官网下载字体图标官网地址:https://www.iconfont.cn/将图标添加到购物车从购物车添加到项目下载至本地添加字体图标文件到项目中下载文件中iconfont.css以及4个不同后缀名的文件是会用到的文件将iconfont.css文件放在assets—css文件夹下在vue项目 assets—css文件中新建iconfont文件夹,将四个不同后缀名的文件放在此...原创 2019-01-02 15:41:16 · 2273 阅读 · 0 评论