1.在百度地图申请密钥: http://lbsyun.baidu.com/  将<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>中的密钥替换成你申请的,在vue项目的index.html引用。2.在build文件下下的webpack.base.conf.js贴入代码externals:{"BMap":"BMap"},3.map.vue代码(demo可以直接使用,demo使用了vue-clipboard2插件,请自行安装)<template><div><el-row><el-col:offset="2":span="8"><el-input:id="suggestId"v-model="address_detail":clearable='clearable'placeholder="请输入店铺地址,获取店铺坐标"></el-input>...

Vue项目部署上线后经常会发现首屏加载的速度特别慢：那么有那写能做的简单优化呢一、路由的懒加载路由懒加载也就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。 结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。 在router中，我们平时是这样引入组件的：importFoofrom'./Foo.vue'文档中指出，如下定义一个能够被Webpack自动代码分割的异步组件constFoo=()=>import('./Foo.vue')在路由配置中什么都不需要改变，只需要像往常一样使用Foo：constrouter=newVueRouter({routes:[{path:'/foo',component:Foo}]})官网介绍地址：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html二、使用cdn 打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。&nbs...

因微信分享和自动登录需要，对于URL中存在'#'的地址，处理起来比较坑（需要手动写一些代码来处理）。还有可能会有一些隐藏的问题没被发现。如果VUE能像其他（JSP/PHP）系统的路径一样，就不存在这些问题了。对于VUE的router[mode:history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。但对于放到nginx下运行的时候，自然还会有其他注意的地方。总结如下：在nginx里配置了以下配置后，可能首页没有问题，链接也没有问题，但在点击刷新后，页面就无法显示了（404）location/{root/data/nginx/html;indexindex.htmlindex.htm;}为了解决404，需要通过以下两种方式:方式一location/{root/data/nginx/html;indexindex.htmlindex.htm;error_page404/index.html;}方式二location/{root/data/nginx/html;indexindex.htmlindex.htm;if(!-e$reques...

前端开发中，为了更好的用户体验，在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法。html代码：<divid="myPhoto"v-show="personalPhoto"><divclass="viewPhoto"><imgsrc="">""id="portrait"color:#800000;">"width:300px;height:300px"/></div><divclass="listBox"><dl><dt>请上传图片</dt><dd><inputtype="file"id="saveImage"name="myphoto"></dd></dl></div><divclass="save"><inputtype="button"value="保存图片"@click="imageSubmit"></div></div>js代码：//...

vue2.0模拟锚点实现定位平滑滚动 　　效果为点击哪一个标题，平滑滚动到具体的详情。　　如果是传统项目，这个效果就非常简单。但是放到Vue中，就有两大难题：　　1.在没有jQuery的animate()方法的情况下，如何实现平滑滚动？　　2.如何监听页面滚动事件？　　进行多次尝试之后，终于解决了这些问题　　期间主要涉及到了 setTimeout的递归用法，和Vue生命周期中的 mounted　　首先导航处<h3class="current"><ahref="javascript:;"class="button"@click="jump(0)">产品详情</a></h3><h3><ahref="javascript:;"class="button"@click="jump(1)">预定须知</a></h3><h3><ahref="javascript:;"class="button"@click="jump(2)">费用明细</a&...

1.实现效果以get方法向http://192.168.32.12:8080/users发起请求、获取数据并进行处理this.apiGet('/users',{}).then((res)=>{console.log(res)},(err)=>{console.log(err)})2.实现步骤一之配置域名前缀2.1安装axioscnpminstallaxios--save2.2配置webpack.base.conf.js文件引入constwebpack=require('webpack')在项目根目录下的build中可以找到webpack.base.conf.js文件，对文件中的内容进行以下两项操作：　　在module.exports之前插入代码//definethedifferentHOSTbetweendevelopmentandproductionenvironmentvarDEV_HOST=JSON.stringify('http://192.168.32.12：8080')varPUB_HOST=JSON.stringify('http://{部署服务器ip和端口}...

这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下： identify.vue组件（主要用于定义参数和方法）<template><divclass="s-canvas"><canvasid="s-canvas":width="contentWidth":height="contentHeight"></canvas></div></template><script>exportdefault{name:'SIdentify',props:{identifyCode:{type:String,default:'1234'},fontSizeMin:{type:Number,default:16},fontSizeMax:{type:Number,default:40},backgroundColorMin:{type:Number,default:180},backgroundColorMax:{type:Number,default:240},colorMin:{type:N...

一、在vue中的锚链接和普通的html不同关于vue中的锚链接可以参考vue中的  scrollBehavior 滚动行为。在router.js中 constrouter=newVueRouter({　　　routes,　　　　　　mode:'history',　　　　　　scrollBehavior(to,from,savedPosition){　　　　　　　　if(to.hash){　　　　　　　　　　return{　　　　　　　　　　　　selector:to.hash　　　　　　　　　　}　　　　　　　　}　　　　　　}})exportdefaultrouter;在vue中 点击跳转的位置使用<a>链接包起来<div><ahref="#populationInformation">人口画像</a></div><div><ahref="#peopleCounting">人流统计</a></div><div><...

在我们需要实现这样一个功能，登录拦截其实就是路由拦截，首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。在路由管理页面添加meta字段router/index.js文件，例如，在用户直接跳转/manage路径下的时候，实现路由拦截{path:'/manage',name:'manage',component:manage,meta:{requireAuth:true}},我们需要在main.js中加上router.beforeEach((to,from,next)=>{console.log(to);console.log(from);if(to.meta.requireAuth){//判断该路由是否需要登录权限if(localStorage.getItem('access_token')){//判断本地是否存在access_tokennext();}else{　　　　　　next({　　　　　　　　path:'login',　　　　　　　　query:{　　　　　　　　　...

生命周期的三个阶段：挂载阶段（1~4）、更新阶段（5~6）、销毁阶段（7~8）；beforeCreatecreatebeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed考点：1、create和mounted区别beforecreated：el和data并未初始化created:完成了data数据的初始化，el没有beforeMount：完成了el和data初始化mounted：完成挂载总结：creat是吧vue实例初始化，但是并没有渲染，mounted是真正页面渲染了2、beforeDestory都做什么解除绑定、销毁子组件以及事件监听器 二、父子组件，生命周期　　用create和mountedupdated说明1、初始化，创建实例是从父组件到子组件，渲染是从子组件到父组件　　父created=>子created=>子mounted=>父mounted2、数据更新　　父beforeUpdate=>子beforeUpdate=>子updated=>父updatedbeforec...

很多时候我们需要使用地址三级联动，即省市区三级联动。网上有很多插件，在此介绍Vue的一款地区联动插件：vue-area-linkage，下面介绍如何使用这个插件实现地址联动效果：一、安装//v5之前的版本npmi--savevue-area-linkage//v5及之后的版本npmi--savevue-area-linkagearea-dataoryarn//v5之前的版本yarnaddvue-area-linkage//v5及之后的版本yarnaddvue-area-linkagearea-data  二、在main.js上进行依赖注入importVuefrom'vue';import{pca,pcaa}from'area-data';//v5orhigherimport'vue-area-linkage/dist/index.css';//v2orhigherimportVueAreaLinkagefrom'vue-area-linkage';Vue.use(VueAreaLinkage)三、组件中使用//v5之前的版本<area-selectv-mode...

Vue原本有一个官方推荐的ajax插件 vue-resource，但是自从Vue更新到2.0之后，官方就不再更新vue-resource目前主流的Vue项目，都选择 axios 来完成ajax请求，而大型项目都会使用Vuex来管理数据，所以这篇博客将结合两者来发送请求 前言： 使用cnpm安装axioscnpminstallaxios-S安装其他插件的时候，可以直接在main.js中引入并Vue.use()，但是axios并不能use，只能每个需要发送请求的组件中即时引入为了解决这个问题，有两种开发思路，一是在引入axios之后，修改原型链，二是结合Vuex，封装一个aciton。具体的实施请往下看~ 方案一：改写原型链首先在 main.js 中引入axiosimportaxiosfrom'axios'这时候如果在其它的组件中，是无法使用axios命令的。但如果将axios改写为Vue的原型属性，就能解决这个问题Vue.prototype.$ajax=axios在main.js中添加了这两行代码之后，就能直...

一、轮播图组件是这样安装的npmi--save-devvue-awesome-swipermain.js里面import'swiper/dist/css/swiper.css'importVueAwesomeSwiperfrom'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)banner.vue.切记要在需要引入的页面中import{swiper,swiperSlide}from'vue-awesome-swiper'<template><divclass="swiper-container"><divclass="swiper-wrapper"><swiper:options="swiperOption"ref="mySwiper"><!--幻灯内容--><swiper-slide:key="i"v-for="(str,i)inbannerList"><img:src="str.picUrl"color:#800000;">"height:100%"/><...

最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。例如：订单列表也跳转详情页，跳转方法如下<router-link:to="{path:'/orderDetail',query:{orderId:scope.row.orderId}}"><el-buttontype="success"size="small">详情</el-button></router-link>第一个跳转没问题，但是返回列表以后，在进入其他的详情页，顶部url的值变化了，但是在详情页中this.routerId=this.$route.query.orderId;这样打印出来值是不发生变化的。解决方案如下：数据初始化是这样的（不变）/***数据初始化*/initDate(){this.routerId=this.$route.query.orderId;加一段代码watch:{'$route'(to,from){this.initDate();}},这样就能解决了...

npminstallecharts-Smain.js//引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=echartsHello.vue<divid="myChart":color:#800000;">"{width:'300px',height:'300px'}"></div>exportdefault{name:'hello',data(){return{msg:'WelcometoYourVue.jsApp'}},mounted(){this.drawLine();},methods:{drawLine(){//基于准备好的dom，初始化echarts实例letmyChart=this.$echarts.init(document.getElementById('myChart'))//绘制图表myChart.setOption({title:{text:'在Vue中使用echarts'},tooltip:{},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋...