Lval的博客

npm install xxxx --legacy-peer-deps

使用防抖函数传递参数时，参数会存在arguments中。

下载mocknpm install mockvue中使用mock.js1.在src下新建一个mock模块2.在mock模块下新建index.js文件统一管理mock数据import Mock from 'mockjs'// 设置响应延时Mock.setup({ timeout: '200-600'//可以是整数，也可以是‘-’字符串});let configArray = [];//使用webpack的require.context()遍历所有的mock文件const fi

路由拦截beforeEach和addRouter注意：1.一定要理解beforeEach（全局的路由守卫，每一次路由执行都会触发）和addRoutes的运行机制，这里容易陷入死循环，所以一定要做好判断，不要每一次路由调用都执行addRouter的方法2.使用 addRoutes 钩子后, 直接调用 next() , 如果当前页面的路由是通过 addRoutes 添加进去的，对应的路由不会渲染，当前访问是没法跳转进去的, 所以需要调用 next, 重定向当前的路由（next({…to, replace:

原因vue框架对数据设置的监控器导致数组后面会出现 Observer,观察者模式，它不可枚举，从中不可xx[0]取值解决方案通过一次深拷贝重新生成一个可枚举的数组JSON.parse(JSON.stringify(store.getters.menuList))...

安装npm install highcharts --save配置main.jsimport highcharts from 'highcharts'import highcharts3d from 'highcharts/highcharts-3d'highcharts3d(highcharts)在组件中使用import HighCharts from 'highcharts'init3dPieChart() { Highcharts.chart("cotrun-3dp

1,在命令行输入vue create 项目名称，输入完成后，他会有这样一句询问Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)意思是没有科学上网是否选择淘宝源，这里选择y（如果配置过淘宝源则不会显示这个选项）2.上一步选择y后会弹出如下选项? Please pick a preset:

Proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义语法const p = new Proxy(target, handler)参数target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）handler一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。基础示例getget方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身(用到data时会触发)

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。在vue.config.js文件（cli3会自动生成，如果没有就在根目录新建一个）中的devServer.proxy这个对象进行配置，其中devServer.proxy指向一个开发环境下的服务器API地址，配置如下：module.exports = { lintOnSave: false, //关闭eslint检测\ devServer:{

全局安装cli3最高版本npm install -g @vue/cli@3.12.1查看是否安装成功vue --version创建项目vue create my-project（项目名）defult //默认配置Manually select features //自己选择配置选择你需要的基础配置（空格键选择）是否使用history mode，其实呢就是我们的页面路由含不含有#;这里我们选y选择自己需要的css预处理eslint选择选择什么时候检查，Lint on save

统计代码安装//main.js声明_hmt对象var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到//统计代码获取(function() { var hm = document.createElement("script"); hm.src ="https://hm.baidu.com/hm.js?百度统计所申请的appKey"; var s = document.ge

实现动态路由配置关键是路由嵌套配合router-view(可以看作一个容器，存放匹配到的路由组件)例：{ path: '/', //匹配第一层菜单 component: Layout,//整体布局的组件 redirect: '/dashboard', children: [{ //匹配一级菜单下的二级菜单（匹配的结果会放入<router-view />中） path: 'dashboard', name: 'Dashboard',

安装npm install vue-seamless-scroll --save引入import vueSeamlessScroll from "vue-seamless-scroll";export default { components: { // circleBg, vueSeamlessScroll }}使用<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="clas

echarts词云图是echarts的一个扩展安装使用1.安装依赖 npm install echarts npm install echarts-wordcloud2.引入main.jsimport echarts from 'echarts';Vue.prototype.$echarts = echarts在用到的组件中引入扩展<script>import "echarts-wordcloud/dist/echarts-wordcloud";import "e

1.将字体文件放入项目中新建一个文件夹，将字体文件放入其中2.创建一个font.css文件在ttf同级目录下创建一个font.css文件，并将字体文件的路径引入@font-face { font-family: 'hanbao'; src: url-loader('huawen.ttf'); font-weight: normal; font-style: norm...

通过config接口注入权限验证配置config内的配置参数一般由后台返回，这里是图片上传，需要使用chooseImage，uploadImage两个接口wechatConfig(){wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 ...

全局安装 vue-cli1.$ cnpm install –global vue-cli如果已经安装过了就不用安装了，这里我前面的项目已经安装过了，所以直接从第二步开始my-project为自定义项目名2.$ vue init webpack my-project需要注意的是项目的名称不能大写，不然会报错项目初始化时会询问一些安装项，可以根据自己的需求选择Pro...

安装npm i element-ui -S完整引入在mian.js中复制如下代码import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);...

滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持 history.pushState 的浏览器中可用。当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：const router = new Vu...

定义路由的时候可以配置 meta 字段export default new Router({ routes: [ { path: '/', component: Index, meta:{ title:'裂变商城-管理后台', allowBack: false } }, ] })...

导航守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫全局前置守卫全局前置守卫：router.beforeEachconst router...

准备开发工具开发工具：HBuilderX官网地址（标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版）新建项目选择新建–>项目–>5+App–>点击创建创建完成后你的图标会变成下面这种：5+的图标创建完成后会出现这些文件和文件夹其中css，img和js文件都是可以修改的unpackage文件是存放APP图标的，...

计算属性理解1、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上获取到并进行相应的数据处理2、computed里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。案例：<template> <div @click='add'> + </div>&l...

下载npm install axios --save-dev引用import axios from 'axios'将axios绑定给vue成为一个属性,这样可以在任意组件中使用//设置axios请求的默认host//axios.defaults.baseURL = 'https://wechat.kayunzh.com'//将axios注入到vue原型上Vue.prototype...

vue中引入iconfont 打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 将选好的图标下载到本地,并复制到assets目录下 在main.js中引入文件中的iconfont.css文件 1 import './assets/iconfont/iconfont.css' 然后就可以...

vue九宫格抽奖页面结构 12345678910111213 <div id="gift-box"> <ul> <li :class="[index==0?'active':'']">一等奖</li> <li :class="[index==1?'active':'']"&...

axios拦截器下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。下面是一个为axios添加请求loading的例子：添加请求拦截器//定义一个请求拦截器axios.interceptors.request.use(function(config){ Vue.$vux.loading.show(); //在请求发出之前进行一些操作 r...

安装npm install --save js-md5组件内引入需要的组件内引用import md5 from 'js-md5';使用let psd = '123123'md5(psd) // 4297f44b13955235245b2497399d7a93全局引入在main.js中将md5注入到vue原型上import md5 from 'js-md5';Vue.p...

vue-cropper文档安装npm install vue-cropper使用import VueCropper from 'vue-cropper' Vue.use(VueCropper)模板注意外部要包裹一个总的盒子 <div> <div class="model" v-show="model" @click="model = false"&gt...

canvas生成图片结构注意不要用v-if控制显示隐藏，canvas在dom被删除后在显示时画布上的内容会消失<div class="mask_operation" v-show="cvsshow"> <div class="cvs-box"> <canvas id="mycvs" v-show='fals...

安装使用npm 安装npm install vue-scroller -d引入在main.js里面使用import VueScroller from 'vue-scroller'Vue.use(VueScroller)使用注意：scroller的使用最好设置一个高<scroller style="top: 100px;" :height='400' :on-refresh...

js.<script language="javascript"> //防止页面后退 使用在vue时 挂载到mounted中 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null,...

vue监听移动端软键盘搜索事件vue中监听手机键盘的【完成】或【搜索】按钮触发事件，需要两个条件1.form表单，输入框2.@keyup.13 事件 或者 直接@keyup 然后事件的处理函数里判断 event.keyCode === 13<input type="text" @keyup.13 = "handleKeyUp" placeholder="请输入用户手机号" v-mod...

在一些高版本的ISO上设置placeholder显示的字体大小的时候,有时候会被遮挡掉一部分出现原因：input 里面的字体大小小于placeholder的字体大小解决方法: 设置input字体大于placeholder的字体input{ font-size: 16px;}::-webkit-input-placeholder{ font-size: 13px;}...

1.挂载完成后，判断浏览器是否支持popstateHistory 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。通过监听history的pushState来判断页面的状态mounted(){ if (window.history && win...