- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue3实战-axios请求封装（get、post、put、delete）
1、在src目录下创建http文件夹，在http文件夹下分别创建index.js、request.js、api.js2、index.js的作用：用于导出api.js定义的所有接口，代码如下export * from './api';3、request.js代码如下：import axios from 'axios';import buildURL from 'axios/lib/helpers/buildURL';import { merge } from 'axios/lib/utils';
2022-04-20 09:13:55
5042
原创 vue3实战-vue.config.js配置
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ //基本路径 publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //输出目录 outputDir: 'dist', //指定生成的文件 indexPath: 'index.html', //vue兼容ie transpileDep
2022-04-13 15:47:41
1998
1
原创 vue3实战-子组件之间相互传值
1、引用第三方库mittnpm install mitt2、在项目src文件夹下创建utils文件夹，在utils创建mitt.js，mitt.js中的代码如下：import mitt from "mitt";export default new mitt();3、示例：组件A传值给组件B//在组件A中引入import mitt from "@/utils/mitt";//调用传值mitt.emit("mittClick", "数据数据数据");//在组件B中引入import
2022-04-12 13:50:45
1794
原创 vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题
1、处理vue.config.js文件中的publicPath，处理如下：const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,
2022-03-21 08:58:32
4923
原创 vue3实战-项目安装
1、安装node环境，看node.js、npm是否安装：node -v npm -v2、全局安装vue脚手架：npm install -g @vue/cli3、查看vue版本：vue -V（大写V）4、创建项目：vue create projectname（projectname不能 有大写字母）5、您与默认npm注册表的连接似乎很慢，使用https://registry.npmmirror.com为了更快地安装，选择y（yes）6、请选择一个预设，一般选第三个，手动选择功能
2022-03-02 10:25:05
686
原创 cesium模型沿着经纬度轨迹移动
一、展示代码<template> <div id="cesiumContainer"> <img ref="sillygif" style="position: absolute; width: 54px; height:54px; z-index: 2" v-for="(item, index) in routeData" :key="index"
2021-12-30 08:57:22
2433
9
原创 openlayers常用方法封装
import 'ol/ol.css';import { isPlainObject } from '@/utils/assist';import { Map, View, Tile, Feature, Overlay } from 'ol';import { XYZ, Vector as VectorSource, ImageStatic, ImageCanvas as ImageCanvasSource, Cluster } from 'ol/source';import { Tile as Ti
2021-12-21 09:03:52
1163
原创 vue-pdf显示所有页数的方法
安装vue-pdfnpm install --save vue-pdf代码如下<template> <div class="wrap"> <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/> </div></template><script>import pdf from 'vue-pdf'import
2021-11-08 08:52:48
2874
7
原创 js、vue图片链接转成base64
1、创建imgUrlToBase64.js文件imgUrlToBase64.js2、封装代码如下export let imgUrlToBase64 = function(imgUrl){ let base64Url = ""; let image = new Image(); image.setAttribute("crossOrigin", "anonymous");//解决跨域问题 image.src = imgUrl; image.onload = function
2021-10-19 10:30:04
1198
原创 vue引用tinymce富文本编辑器及tinymce配置
一、效果如图所示二、页面标签展示<editor id="editer" api-key="no-api-key" v-model="editerValue" :init="initEditor" />三、引入编辑器及配置<script>import Editor from '@tinymce/tinymce-vue';export default { components:{ Editor }, data () { return
2021-10-13 15:07:04
720
9
原创 js如何获取今年每个月的天数
monthArrData(){ let year = new Date().getFullYear; let isRunNian = true;//true是闰年，false是平年 let monthArr = []; if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){ isRunNian = true; }else{ isRunNian = false;
2021-09-29 09:46:06
151
原创 openlayers实现四周遮罩，特定区域透明效果
1、效果如图所示2、地图标签<template> <div id="icingliveMap" class="icingliveMap"></div></template>3、样式<style>html, body, #app, .icingliveMap{ width: 100%; height: 100%;}</style>4、导入openlayers的API、导入axiosimport "ol/ol
2021-09-09 09:06:28
2828
3
原创 vue请求后台JFIF格式文件流
//get请求JFIF格式图片文件流export function getJFIF(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params, responseType: 'arraybuffer' }).then(res => { resolve(res.data);
2021-08-31 09:47:08
818
原创 openlayers鼠标经过指定图层箭头变成手势
this.map.on('pointermove', e => { //鼠标经过箭头变手势，，可以在if的条件中加入指定的图层layerId即可 let pixel = this.map.getEventPixel(e.originalEvent); let hit = this.map.hasFeatureAtPixel(pixel, { layerFilter: layer => { let layerId = layer.ge
2021-08-04 15:14:39
1321
原创 如何获取两个经纬度点之间的中心点的经纬度
export function getCenterLonLat(oneLon, oneLat, twoLon, twoLat) { //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度； let aLon = 0, aLat = 0; let bLon = Number(oneLon) - Number(twoLon); let bLat = Number(oneLat) - Number(twoLat);
2021-08-03 09:14:17
3736
原创 vue生产环境删除console.log的简易方法
一、说明该方法不用安装插件，通过判断环境是否为开发环境或者是测试环境，是的话就打印日志，这个方法个人觉得是最方便的！二、创建showlog.js在src目录下创建utils文件夹，在utils文件夹中创建showlog.js三、showlog.js代码如下function showlog(log){ if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test"){ console.
2021-07-30 10:08:37
712
原创 echarts多个折线图的使用
一、如图所示二、页面引入echarts//引入 echarts 主模块import * as echarts from 'echarts/lib/echarts';//引入折线图、柱状图import 'echarts/lib/chart/line';import 'echarts/lib/chart/bar';//引入提示框组件、标题组件、工具箱组件import 'echarts/lib/component/tooltip';import 'echarts/lib/component/t
2021-07-28 10:03:53
1176
原创 cesium用鼠标绘制点、线
1、如图所示2、封装代码 //绘制 drawPointLine() { this.isDrawPointLine = !this.isDrawPointLine;//用于判断是否绘制 let that = this; let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handl
2021-07-08 17:29:58
1797
原创 如何解决echarts图表y轴数据间隔过大的方法
1、如图所示，echarts图表y轴数据间隔过大，前面几个显示正常，最后一个值变得很大，造成页面特别难看2、解决办法：在yAxis中axisLabel设置如下，可以根据自己的需求截取几位小数点yAxis: { type: "value", axisLabel: { formatter:function (value, index) { return value.toFixed(2); } }}
2021-06-24 14:18:40
6181
原创 vue自动注册组件
1、在项目的src目录下的components文件夹中创建autoRegisterComponents.js，js文件中代码如下import Vue from "vue";const requireComponent = require.context( "./",//组件目录的相对路径 true,//是否查询其子目录 /\.vue$/,//匹配基础组件文件名的正则表达式);requireComponent.keys().forEach(fileName => {
2021-06-17 14:27:08
232
原创 vue项目日期时间格式化插件
1、新建dateFormat.jsexport const dateFormat = function(date, format) { if (typeof date === 'string') { date = date - 0 || (!/\d+T\d+/.test(date) ? date.replace(/-/g, '/') : date); } const d = new Date(date); if (!date || d.toUTCString
2021-06-09 09:05:43
523
原创 uni-app网络请求get和post简单封装
1、创建request文件夹和http.js文件2、http.js中的代码let baseUrl = '请求地址'let header = { 'Content-Type': 'application/json;charset=UTF-8'}export default{ get(url,param){ return new Promise((resolve,reject) =>{ uni.request({
2021-05-18 09:00:37
2090
1
原创 cesium创建长方体、立方体的三种方式
第一种viewer.entities.add({ id: `box`, name : `box`, position: Cesium.Cartesian3.fromDegrees(经度值, 纬度值, 离地面高度值), box : { dimensions : new Cesium.Cartesian3(方体长度值, 方体宽度值, 方体高度值), material : Cesium.Color.fromCssColorString(“#ffff
2021-04-23 14:57:22
3461
原创 vue安装cesium（vue-cli3+）
一、安装cesiumnpm install cesium --save 二、在main.js全局引入let Cesium = require('cesium/Cesium');let widgets= require('cesium/Widgets/widgets.css');Vue.prototype.Cesium = Cesium;Vue.prototype.widgets = widgets;三、在vue.config.js中的配置1、引入cesiumlet cesiumSour
2021-04-13 16:21:36
616
原创 vue项目搭建(分vue-cli2和vue-cli3+)
vue项目搭建(分vue-cli2和vue-cli3+)一、安装node环境1、下载链接：https://nodejs.org/en/2、检查node环境是否安装成功：node -v3、检查npm版本：npm -v二、提高效率，使用淘宝镜像1、npm install -g cnpm --registry=https://registry.npm.taobao.org2、用到npm的地方直接用cnpm来代替三、vue-cli安装和卸载1、vue-cli2：安装：npm install -g
2021-03-24 10:43:40
65
原创 vue项目安装配置cesium
vue项目安装配置cesium宗旨：简单、有效、无坑！一、cesium安装npm install cesium --save二、build文件中webpack.base.conf.js配置1、定义const cesiumSource = ‘…/node_modules/cesium/Source’2、在output中写入：sourcePrefix: ’ ',此处单引号内放有一个空格3、与output同级写入：amd: { toUrlUndefined: true },4、在resolve中的
2021-01-08 15:50:39
1102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人