![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 80
锦岁
学生,前端实习中
展开
-
记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image
由于项目需要加入用户指引,于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的,于是就准备使用driver.js,修改下样式就行了。但是真正用设计图来设置时却发现了问题,由于项目是用vue编写的,根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的,driver.js获取不到,而且部分dom高亮时只有一个白色的框框覆盖,整了两天发现搞不定于是准备换插件。在帖子上看到有人使用vue-tour插件,缺点是他的高亮跟没高亮一样,完全看不出来,但原创 2021-03-22 11:05:20 · 3051 阅读 · 2 评论 -
NProgress加载进度条插件vue
1、安装:npm install --save nprogressimport NProgress from 'nprogress'; // Progress 进度条import 'nprogress/nprogress.css';// Progress 进度条 样式或直接引入js、css或者通过cdn引入:<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css原创 2020-11-30 09:35:04 · 105 阅读 · 0 评论 -
code ELIFECYCLE npm ERR! errno 1
最近遇到一个项目,npm下来报错errno -40048。网上帖子有的说npm降级到5.3.0就行,试了直接errno -5 ,也还是不行。又有人说下载新的node.js覆盖就行,这里吐槽一下新版的node(node-v14.15.1-x64),居然要win8及以上才行,我们win7居然安装不了(公司比较多的都是win7),最后装了旧的node-v12.16.2-x64。折腾了半天还是不行,但我的同事就直接可以跑起来的,我以为我们配置不一样,但node和npm、vue版本都是一样的。最后没办法用土方原创 2020-11-27 09:39:29 · 7491 阅读 · 0 评论 -
vue postcss-px-to-viewport插件 px转vw
npm install postcss-loader postcss-px-to-viewport --save-devvue-cli3:vue.config.js:module.exports = { devServer: { port: 8080, disableHostCheck: true, }, css: { loaderOptions: { postcss: { plugins: [ require("p原创 2020-11-06 13:15:03 · 751 阅读 · 0 评论 -
qrcodejs生成二维码
QRCode.js 是一个用于生成二维码图片的插件。1、安装qrcodejs2npm install qrcodejs2 --save2、在页面中引入import QRCode from "qrcodejs2"3、在html中设置div,用来存放生成的二维码。id为标识容器的依据。<div id="qrcode"></div>4、js生成微信二维码//生成微信二维码 qrcode(){ let url = location.hr原创 2020-11-02 16:14:49 · 203 阅读 · 0 评论 -
vue v-if transition不起作用
<transition name="动画名"></transition>ps:过渡的元素只能是以下之一:条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点自定义过渡动画的,记得在css中修改以下的类名:动画名-enter 进入前效果动画名-enter-active 进入的过渡时间和函数动画名-enter-to 进入后效果动画名-leave 离开前效果动画名-le原创 2020-10-29 15:49:58 · 4076 阅读 · 0 评论 -
vuex基础知识
一、介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。vue-bus可用于不是特别复杂原创 2020-06-30 09:37:12 · 335 阅读 · 0 评论 -
vue-cli2改vue-cli3报错npm install --loglevel error --registry
1、卸载vue-cli2npm uninstall vue-cli -g2、安装vue-cli3npm install -g @vue/cli注:需将 Node 版本升级至 8.9 及以上。3、vue create创建项目失败报错:npm install --loglevel error --registry1)出现这个错误,首先需要排除,node,npm的版本问题。2)然...原创 2020-04-13 14:22:19 · 186 阅读 · 0 评论 -
vue devtools安装
1、到github下载:https://github.com/vuejs/vue-devtools2、在vue-devtools目录下安装依赖包:npm i3、修改shells->chrome->manifest.json文件把"persistent":false改成true4、打包npm run build5、打开谷歌浏览器,设置—>扩展程序,勾选开发者模式...原创 2020-03-24 15:16:40 · 140 阅读 · 0 评论 -
vue-cli2与vue-cli3 新建项目
1、新建项目vue init webpack test2、安装axios,qsnpm install axiosnpm i qs 在main.js中 //1、引入 import axios from 'axios' import qs from 'qs' //2、将axios,qs配置成vue的原型 Vue.prototype.$axios...原创 2019-11-22 13:13:24 · 1416 阅读 · 0 评论 -
element全局消息提示组件自定义
有次开发想用element消息提示组件,但用不上其他组件就不想引入element,于是就自己写了,以下是方法。1、文件目录2、message.vue<template> <transition name="fade"> <div class="message" :class="type" v-if="visible"> <i...原创 2019-11-22 10:37:35 · 947 阅读 · 2 评论 -
vue 配置vue-devtools调试工具
1、到github下载:https://github.com/vuejs/vue-devtools2、 进入到 vue-devtools 所在目录,然后运行以下两个指令 npm install npm run build3、修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将 persistent 参数改为 true4、将扩展程...原创 2019-09-25 09:29:10 · 148 阅读 · 0 评论 -
vue单页面转多页面
一、调整目录调整前:1、进入src文件夹中,新建一个文件夹,取名pages,用于存放页面文件,然后在pages里面新建一个文件夹叫index用于存放首页,然后将下图红框内的文件(文件夹)都拉进index文件夹里面,还有最外层的index.html也拉进去2、这时候的src文件夹里面只有两个文件夹一个是components用于存放组件文件,pages用于存放页面,然后新建一个module...原创 2019-09-25 09:15:10 · 2343 阅读 · 0 评论 -
vue报错总结
1、building modules 1/1 modules 0 activeevents.js:174 throw er; // Unhandled ‘error’ event没有设置host,或者host不对。在 \config\index.js里面更改const path = require('path')module.exports = { dev: { /...原创 2019-09-19 10:32:23 · 3197 阅读 · 0 评论 -
vue-cli 网站ico
1、生成ico图标http://www.faviconico.org/favicon2、直接命名为favicon.ico,存放在static目录3、在主文件index.html内中直接引入图标文件<link href="./static/favicon.ico" rel="shortcut icon" type="image/x-icon">4、重新运行项目npm run...原创 2019-09-18 11:13:40 · 154 阅读 · 0 评论 -
vue项目关闭eslint
打开build\webpack.base.conf.js将框框内的createLintingRule删除即可。原创 2019-07-19 14:43:23 · 128 阅读 · 0 评论 -
vue基础(二):组件(props、$ref、$emit、<solt>、.native)
1、父子组件//父组件<template> <div> <h1>我是父组件!</h1> <child></child> </div></template> <script>import Child from '../components/child.vue'export...原创 2019-08-14 15:38:00 · 3375 阅读 · 0 评论 -
vue基础(一):插值、过滤器、指令
一、插值1、双大括号<span>{{text}}</span>2、作为属性不用{{}},但要用:绑定属性 <img :src="item.imagepath">3、 v-once 指令,一次性地插值,当数据改变时,插值处的内容不会更新。<span v-once>{{ msg }}</span>4、纯html <...原创 2019-08-06 15:32:35 · 137 阅读 · 0 评论 -
vue:keep-alive组件缓存
1、keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。<keep-alive> <component></component> <!-- 该组件将被缓存! --></keep-alive>当组件在keep-alive内被切换时组件...原创 2019-08-09 13:08:20 · 240 阅读 · 0 评论 -
vue-infinite-scroll插件,列表无限加载
在前端开发中,无限加载是必需的一项功能,如何在Vue-Cli中实现这个功能呢?Element UI开发了一款专用于Vue的vue-infinite-scroll插件。1、安装npm install vue-infinite-scroll --save2、示例<div v-infinite-scroll="loadMore" infinite-scroll-disabled="bus...原创 2019-08-09 15:32:26 · 1040 阅读 · 0 评论 -
vue基础(三):监听、计算
一、watch监听监控vue实例的变化,监听单个属性,必须在data里面声明,监控变量/对象。基本数据类型简单监视,复杂数据类型(对象、数组)深度监视。<input type="text" v-model="msg"><h1>{{msg}}</h1><button @click='stus[0].name="jack"'>改变</bu...原创 2019-08-10 23:28:03 · 254 阅读 · 0 评论 -
vue基础(四)生命周期
一、创建1、beforeCreate组件创建前2、created组件创建后可在此方法中操作后端的数据,数据响应视图应用:发起Ajax请求<body> <div id="app"> <App></App> </div></body>new Vue({ el:'#app', data(){ retu...原创 2019-08-11 02:31:40 · 153 阅读 · 0 评论 -
vue基础(五):给DOM添加事件的特殊情况 $nextTick
1.钩子函数钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。对于前端来说,钩子函数是指在所有函数执行前,先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行。3.vue中的mounted在这发起后端请求,拿回数据,配合...原创 2019-08-11 03:52:14 · 537 阅读 · 0 评论 -
vue基础(六):路由
路由原创 2019-08-11 16:13:18 · 124 阅读 · 0 评论 -
单页面与多页面
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面页面跳转仅刷新局部资源。常用于PC端官网、购物等网站。多页面(MPA),就是指一个应用中有多个页面,多页面跳转刷新所有资源,每个公共资源(js、css等)需...转载 2019-09-16 10:55:43 · 170 阅读 · 0 评论 -
openlayers+vue:底图切换(天地图)
1、创建项目2、安装ol依赖npm install ol3、在index.html页面引入天地图 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=d0cf74b31931aab68af181d23fa23d8d"></script><templ...原创 2019-07-19 14:27:15 · 3497 阅读 · 3 评论