![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
pamerely
这个作者很懒,什么都没留下…
展开
-
修改el-select右边的icon图标
修改el-select右边的icon图标前言效果图代码前言遇到了需要改el-select右边小图标的样式,记录一下。效果图代码用背景图也可以用饿了么的icon,如下图.el-select .el-input .el-select__caret.el-icon-::before { content: ""; background: url(../../../../assets/images/inputIcon.png) center center no-repeat; posit原创 2021-07-14 19:59:39 · 6444 阅读 · 3 评论 -
总结:vue父子传参的方式
vue父子传参的方式前言父传子子传父路由传参$refs前言做个小总结,也等于回顾一下知识吧,vue的传参方式。父传子props,例//父组件<children :id="1"></children>//子组件<script> export default { props: { id:{ type: Number, default: 0, } } }</script>$childre原创 2021-04-14 17:16:54 · 427 阅读 · 1 评论 -
百度地图绘画行政区域
百度地图绘画行政区域因为有个需求是要用在线地图只展示市的行政区域,还有ui设计的样式,所以只能自己绘画了。效果图:上代码<baidu-map ref="baiduMap" class="map" :center="mapCon.center" :zoom="mapCon.zoom" @ready="handler" @touchend="mapTouchend"> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIG原创 2021-02-25 17:34:10 · 2550 阅读 · 1 评论 -
vue-cli@4.3.0-引入arcgis
vue项目引入arcgisvue-cli@4.x创建项目引入arcgis引入arcgis_js_api,放在public静态资源文件夹里修改两个文件1.init.jsbaseUrl:"/library/3.30/3.30/dojo"2.dojo.jsbaseUrl:"/library/3.30/3.30/dojo"或者可以直接获取浏览器地址栏的ip和端口,拼接上去;let url = window.location.origin;baseUrl:`${url}/library/3.30/原创 2020-12-30 16:39:48 · 310 阅读 · 1 评论 -
vue-cli@4.3.0请求json
vue-cli@4.3.0请求json前言请求本地的json文件前言vue-cli@4.x创建的项目,就没有static文件夹了,静态资源文件放在public文件夹里。请求本地的json文件把json文件放public文件夹里,通过axios请求this.$axios.get(’/test.json’)ps:如果有拦截器的,对返回格式有要求的,json文件用对应的格式。如果是vue-cli@2.x把json文件放static文件夹里,通过axios请求this.$axios.get(‘st原创 2020-12-30 16:23:56 · 99 阅读 · 0 评论 -
mpvue的生命周期
mpvue的生命周期mpvue有着vue和小程序的生命周期,弄清楚它们的执行顺序很重要在控制台输出一下就知道它们的执行顺序 created() { console.log('page index created') }, mounted() { console.log('mounted') }, onLoad() { console.log('page原创 2020-11-03 11:19:54 · 338 阅读 · 0 评论 -
mpvue引入第三方ui库-vant Weapp
mpvue项目引入第三方ui组件,这里我用的是vant Weapp举栗子下载组件在github上下载压缩包下载地址:https://github.com/youzan/vant-weapp下载完之后,解压,把里面dist重命名为vant,然后把整个文件夹放到mpvue项目中dist文件夹内然后在路由的文件引入 src/router/router.jsmodule.exports = [ { path: '/pages/login/index', name原创 2020-11-03 11:06:05 · 527 阅读 · 1 评论 -
mpvue-axios封装
axios封装import axios from 'axios'import qs from "qs";const BASEURL = process.env.BASEURL;const service = axios.create({ timeout: 50000 // request timeout})service.defaults.adapter = function (config) { return new Promise((resolve, reject) =>原创 2020-11-03 10:26:02 · 288 阅读 · 1 评论 -
mpvue中使用echarts
mpvue中使用echarts安装依赖$ npm install echarts$ npm install mpvue-echarts我把它封装成了一个组件<template> <div :class="className" :style="{height:height,width:width}" > <mpvue-echarts lazyLoad :echarts="echarts" :onInit="ecBarInit" canvasId="lin原创 2020-11-03 10:00:36 · 1364 阅读 · 0 评论 -
mpvue项目中使用vue-router
mpvue项目只用vue-routervue项目都是使用vue-router的路由跳转,而小程序中是不能使用vue-router,这时候就需要一些插件要完成在mpvue中使用vue-router.mpvue-entrympvue-entry:集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面的热更新。mpvue-router-path在mpvue中使用vue-router兼容路由写法,npm地址:https://www.npmjs.com/package/mpvue-router原创 2020-11-03 09:49:48 · 936 阅读 · 0 评论 -
vue项目转小程序-mpvue项目创建
vue项目转小程序-mpvue项目创建前言创建mpvue项目前言这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。创建mpvue项目mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。$ npm install --global vue-cli@原创 2020-11-03 09:15:13 · 3071 阅读 · 0 评论 -
vue多页面ssr服务端渲染之nuxt.js-基本配置
vue多页面ssr服务端渲染之nuxt.js-基本配置前言vue是单页面的项目,当然它也可以用nuxt.js构建多页面的项目,也就是服务端渲染,下面就简称SSR了。SSR是什么呢?其实就是后端把.vue文件编译成.html文件返回给前端渲染,它的好处就是有利于SEO(搜索引擎)。基本配置这篇文章就是讲讲简单的配置项,后续还有其他nuxt.js文章。1.配置ip和端口一般怕端口被占用就配置端口吧,或者想同事访问你的前端项目,可以配置ip。不配置的默认http://localhost:3000在原创 2020-09-23 17:36:41 · 1234 阅读 · 0 评论 -
vue 引入 阿里巴巴矢量图标库iconfont
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法前言开发过程中总会遇到需要一些字体图标,这里就要提一下阿里巴巴矢量图标库了,这里有很多免费的字体图标,可以下载,在项目中引用。选择字体图标打开阿里巴巴矢量图标库官网:https://www.iconfont.cn/在官网里面选择自己想要的字体图标把想要的图标,加入购物车里面,右上角可以看到购物车里面的图标。把购物车里的字体图标加入项目中选择好字体图标后,把购物车里的字体图标加入项目中。原创 2020-08-31 11:10:39 · 1281 阅读 · 0 评论 -
vue px转rem,样式自适应各个分辨率
vue px转rem在项目中,常常会需要页面样式自适应各个分辨率,我的项目一般需要适应1440 * 768至1920*1080 125%的分辨率。因为我们拿到的设计图都是1920 * 1080的,一般都是用px写的,如果是vue项目可以创建项目的时候加上postcss-pxtorem,这样会自动把px编译成rem,不用像传统的html项目,用@media写多套样式了。按照正常流程,当然是先下载依赖啦npm install amfe-flexible --savenpm install postcs原创 2020-08-01 11:56:48 · 3476 阅读 · 2 评论 -
vue播放m3u8格式视频
vue播放m3u8格式视频之前播放视频,直接用的h5的video标签,把地址复制给src就可以直接播放了。但是那个是要mp4格式的,现在的视频是m3u8格式的,播放不了,查了下资料,可以用video.js解决这个问题。vue的使用方法安装依赖npm install --save video.js;npm install --save videojs-contrib-hls在main.js引入全局样式和js文件,也可以在组件局部引入样式,这个看自己的需求import 'video.j原创 2020-08-01 11:40:23 · 5565 阅读 · 12 评论 -
vue 路由hash和history的区别
这里写自定义目录标题hashhistory结言hashurl中#符号本身及其后面的都是hash,http请求并不包括hash部分。vue源码中是通过window.location.hash改变路由,会在浏览器的访问历史中增加一个记录。监听hash:window.addEventListener(“hashchange”, fun, false);$router.push():windo...原创 2020-04-25 22:38:09 · 603 阅读 · 0 评论 -
vue-cli 3.x 项目打包配置-vue.config.js
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...原创 2020-04-14 17:31:32 · 4059 阅读 · 0 评论 -
vue-cli4.x创建项目
前言之前都是用vue-cli2.9.3开发的,现在终于有空来升级一下了,刚刚下载的版本是vue-cli4.3.1。下载之前要先卸载以前的vue-cli2.x,npm uninstall vue-cli -g或者yarn global remove vue-cli卸载它卸载完之后,在下载vue-cli4.x如果你用npm下载失败了,如上图所示,不要慌,可能是你的网络太差了而已,因为npm...转载 2020-04-10 17:31:47 · 1085 阅读 · 0 评论 -
echarts-liquidfill实现温度计样式
echarts-liquidfill实现温度计样式因为项目需求,要用温度计的样式展示百分比,就找到了echarts-liquidfill,更详细的使用方法请参考npm管网:https://www.npmjs.com/package/echarts-liquidfill需要依赖echarts和echarts-liquidfill,版本最好对应,不然可能报错。可以用npm下载或者yarn下载,...原创 2020-04-01 16:28:30 · 1046 阅读 · 0 评论 -
proxy实现数据响应式
<p id="paragraph"></p> <input type="text" id="input"> <script> const paragraph = document.getElementById('paragraph'); const input = document.getElementById('input'); ...原创 2019-04-26 10:46:00 · 749 阅读 · 0 评论 -
Vue 中的nextTick()
简单理解Vue 中的nextTick()的作用this.nextTick()和this.nextTick()的区别:this.nextTick()和this.nextTick()的区别:this.nextTick()和this.nextTick()的区别:this.nextTick(callback),当DOM发生变化,更新后执行的回调;this.nextTick(callback),当数据...转载 2019-04-26 10:29:52 · 290 阅读 · 0 评论