![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
环境及插件安装
环境及插件安装环境及插件安装环境及插件安装环境及插件安装环境及插件安装环境及插件安装环境及插件安装
一个假的前端男
一个 迷迷糊糊的前端
展开
-
在VUE中使用中国天气网插件
第一步在中国天气网根据自己的需要修改配置并生成代码中国天气网:链接第二步<div id="weather-v2-plugin-standard"></div>第三步mounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", background: 4,原创 2021-01-06 11:41:34 · 836 阅读 · 0 评论 -
VUE开发--全屏插件--screenfull
官网https://github.com/sindresorhus/screenfull.js1、安装npm install screenfull --savce2、引入在你需要使用的页面引入import screenfull from 'screenfull'3、使用 (具体API 看官网 这儿只讲我用的)screenfull.request(element, options?) 页面进入全屏 如果只是某一个元素进入全屏 则 screenfull.request(ele)scree原创 2020-12-28 22:23:04 · 1044 阅读 · 1 评论 -
echarts自适应
//下面my_charts是html中echarts的IDvar myChart= echarts.init(document.getElementById("my_charts"));myChart.setOption(option);//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可在mounted中window.onresize = function () { myChart.resize(); }...原创 2020-12-24 16:13:15 · 149 阅读 · 1 评论 -
echarts 堆叠图 解决内容为 0 时,数字被覆盖
bug图:解决方案给label中的normal加一个formatter属性具体如下 label: { normal: { show: true, position: 'insideRight', formatter: function(params) { if (params.value > 0) {原创 2020-12-23 17:15:29 · 1001 阅读 · 0 评论 -
echarts 渲染出的图表和文字模糊问题
方法1:使用svg渲染,svg渲染出的图表的清晰度高于canvasvar myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'});方法2:仍然使用canvas渲染,通过调整devicePixelRatio提升清晰度var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5})转载 2020-12-18 16:14:08 · 1186 阅读 · 1 评论 -
echarts---------------Tooltip的小圆点之谜
当你要格式提示框浮层内容(Tooltip)信息时会出现小圆点消失这个问题出现原因:自定义提示框组件的时候会用到 formatter这个属性解决方法:marker即你需要的小圆点name:即你数据的名字value:数据的值如下代码: tooltip: { formatter: function (param) { return param.marker + " " + " &nbs原创 2020-12-18 15:21:06 · 762 阅读 · 0 评论 -
e-charts中的基本配置------基础地图
backgroundColor:背景色grid:图表离容器的距离title:标题组件left、right、top、bottom: title组件离容器距离text:标题内容textStyle:标题的样式seriestype:表示类型 这里用的是mapmapType:必须存在label:图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等:normal:表示正常状态emphasis:显示高亮状态show:是否显示 这儿.原创 2020-12-17 17:42:12 · 407 阅读 · 0 评论 -
e-charts中的基本配置------折线图
折线图color:调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色在案例中的作用:改变标题线条颜色和折线颜色 使其能保持一致legend:图例组件(标题)展现了不同系列的标记(symbol),颜色和名字textStyle:图例的公用文本样式可改字体颜色和大小orient:改变标题的布局 (垂直or水平)top、right、bottom、left :标题离容器左侧的距离itemGap:标题每项的间距grid:可以控制直角坐标系内绘图网格原创 2020-12-17 16:50:46 · 337 阅读 · 0 评论 -
v-charts的踩坑之旅
1、如何让饼图标题位于图表左侧解决方法通过echarts的属性来改1、通过对标签加入:extend='chartExtend'2、通过echarts的官方文档找到legend属性 (legend属性的作用:图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示)3、这里通过 orient left top属性控制他的显示位置orient:标题的布局朝向left:图例组件离容器左侧的距离top图例组件离容器顶部的距离代码 <ve-pie原创 2020-12-15 17:19:54 · 743 阅读 · 0 评论 -
v-charts 如何更改文本颜色
<ve-line :data="chartData" :extend='chartExtend' height="100%"></ve-line> data() { this.chartExtend = { 'xAxis.0.axisLabel.color': 'white', //x轴文本颜色 'yAxis.0.axisLabel.color': 'white', //y轴文本改变颜色 legend: { ..原创 2020-12-14 15:58:42 · 979 阅读 · 0 评论 -
element ui
如果给elementui的组件设置样式 有几点需要注意style标签不能有scoped, 否则不生效 谨慎在全局的css文件设置elementui的样式,因为这样设置后会应用所有页面中的这个组件样式 建议在style后单独再建一个 如下:<style scoped>无法修改到element ui 的样式<style><style>可以修改</style>...原创 2020-12-03 11:02:29 · 81 阅读 · 1 评论 -
git的使用
1、创建仓库登录后通过右上角的+选择 New repository完成创建仓库2、配置本地git使用git config --global设置用户名和邮件git config --global user.name "Your Name"#用户名git config --global user .email "email@example.com”#邮箱可以使用git config -l来查看配置3、建立本地代码库1、克隆代码:git clone 地址4、基本操作1、添加文件到暂存区:gi原创 2020-11-19 23:29:51 · 87 阅读 · 0 评论 -
关于swiper滑动触发事件
onSlideChangeStart(swiper)swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数onSlideChangeEnd(swiper)swiper从一个slide过渡到另一个slide结束时执行。用法:通过滑动控制标签页的高亮<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{原创 2020-10-11 15:30:43 · 8828 阅读 · 0 评论 -
如何制作标签栏高亮(微信小程序)
思想:1、通过定义一个变量 来控制标签高亮我这里定义的是show show: 0 //导航栏高亮2、通过循环给每一个标签添加点击事件`js代码如下//通过点击事件 把index赋值给show gaoliang(e) { this.setData({ show: e.currentTarget.dataset.index //赋值 }) },html代码通过 动态绑定class事件 对满足条件的标签设置样式<view wx原创 2020-08-07 10:23:42 · 401 阅读 · 0 评论 -
Element ui 导航栏 刷新时高亮
1、在组件中 <el-container> <el-aside> <el-row class="tac"> <el-col> <el-menu :default-active="$route.meta.parentpath" //重点class="menu" background-color="#344055"原创 2020-08-04 15:15:48 · 376 阅读 · 0 评论 -
vant 标签栏高亮
1、通过名称匹配 name2、标签栏支持路由模式,用于搭配vue-router使用。路由模式下会匹配页面路径和标签的to属性,并自动选中对应的标签代码如下//注意name to 监听事件<template> <div> <van-tabbar v-model="active"> <van-tabbar-item icon="wap-home-o" name='/home' to='/home'>商城</van原创 2020-08-04 11:01:29 · 1490 阅读 · 1 评论 -
Vue 拖拽组件 vuedraggable 和 vue-dragging
http://www.ptbird.cn/vue-draggable-dragging.html转载 2020-09-01 10:52:20 · 234 阅读 · 0 评论 -
微信小程序dayjs的使用
1、下载压缩包lib链接如下https://download.csdn.net/download/IT_iosers/127090952、解压lib 并放置在文件根目录下3、在要使用的文件夹下的js文件下引用import dayjs from '../../lib/dayjs.min.js'4、正常使用原创 2020-08-13 11:21:35 · 825 阅读 · 0 评论 -
微信小程序vant的使用
1、下载压缩包lib链接如下https://download.csdn.net/download/IT_iosers/127090952、解压压缩包并将其放置在微信小程序根目录下如下图3、引用 (和引用子组件一致)在要使用的文件夹下的json文件中写入把地址改成相对地址 如下{ "usingComponents": { "van-button":"../../lib/vant/button" }}4、使用<van-button type="prima原创 2020-08-13 11:04:32 · 213 阅读 · 0 评论 -
前端 常用组件
通用组件swpter (轮播图)bootstrap ui组件库vue组件better-scroll(页面平滑滚动)fastclick(取消移动端点击延迟)vant(ui组件库 可适用于移动端 )element-ui (ui组件)dayjs (日期处理组件)axios (网络请求组件)mavon-editor(markdown编辑器)v-charts e-charts(vue图表库)vue-count-to(计数器)vue-image-crop-upload(图片上传)vue ta原创 2020-09-20 12:41:52 · 526 阅读 · 0 评论 -
vue 移动端适配
"postcss": { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { "utf8": false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { "v.原创 2020-09-11 15:34:37 · 126 阅读 · 0 评论 -
swiper6在vue中使用
传送门原创 2020-12-02 23:58:37 · 1486 阅读 · 0 评论 -
前端如何模拟后端数据并实现查看
1、实现1、通过Easy Mock 来实现接口的模拟 传送门2、通过Postman来查看数据是否可以获取传送门原创 2020-11-21 16:15:19 · 704 阅读 · 0 评论 -
v-charts安装-----填坑
v-charts使用,报错找不到 echarts/lib/visual/dataColor或者安装直接报错This dependency was not found:echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.jsTo install it, you can run: npm install --save echarts/lib/visual/dataColor考虑原因v-char原创 2020-12-14 15:22:23 · 2524 阅读 · 5 评论 -
Nginx -- 前端打包后的效果现在观看
Nginx 的下载根据系统选择适合自己的版本Nginx官网Nginx 的安装下载好的安装包直接解压Nginx 的使用1、你找到conf文件下的naginx.conf文件对其进行修改#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/n原创 2021-01-22 14:59:18 · 286 阅读 · 1 评论 -
e-charts 常用配置
基本配置项折线图散点图基本实现气泡图原创 2020-12-29 22:27:40 · 253 阅读 · 0 评论 -
vue 项目中mockjs的使用
一、在项目中通过下列代码安装npm install mockjs --save-dev二、如出现下列问题可执行 npm audit fix三、在src目录下创建一个mock.js文件夹 并创建index.js1、 引入Mock.jsimport Mock from 'mockjs'2、自定义数据3、模拟接口4、导出四、在main.js中引入五、在需要发送请求的地方正常使用六、结果显示因为mockjs是拦截ajax所以请求是不会在Network中显示...原创 2021-04-14 14:28:06 · 333 阅读 · 0 评论 -
vue 中使用iconfont
一、把选择好的icon图标放入项目二、下载至本地三、解压至你所需要的文件中四、在main.js中引入(注意路径)五、直接在你需要的页面引入原创 2021-04-13 11:34:04 · 98 阅读 · 0 评论 -
vue 脚手架无法在当前目录安装
vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本解决方法:执行:set-ExecutionPolicy RemoteSigned (签名或运行这些脚本)转载 2021-04-12 11:44:49 · 102 阅读 · 0 评论 -
vue highcharts使用
1、安装 highchartsnpm install highcharts --save2、安装highcharts-vuenpm install highcharts-vue3、在main中引入import HighchartsVue from 'highcharts-vue'Vue.use(HighchartsVue)4、使用html代码<highcharts :options="chartOptions"></highcharts>data中的数据原创 2021-02-04 15:24:02 · 1503 阅读 · 0 评论 -
vue 高德地图的使用
1、在index.html中引入注意修改key值 注册key <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"></script> 2、在要使用的vue 文件中html 代码<template> <div id="container"></div></template>css 代码<原创 2021-02-03 16:07:12 · 490 阅读 · 0 评论 -
vue公众号打开腾讯地图并计算距离
第一步 引入腾讯cdn1、在index.html 中引入 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=存放自己的key"></script>第二步、在需要的页面引入jssdk安装npm install weixin-js-sdk --save引入import wx from "weixin-js-sdk";import Vue from "vue";Vue.use原创 2021-05-18 11:19:16 · 573 阅读 · 2 评论 -
Vue环境的全套配置
1、Gitgit官网下载:https://git-scm.com/downloads ,如果觉得官网下载速度慢,可以去这里下载,速度很快2、Node.js这儿是传送门:https://nodejs.org/zh-cn/download/releases/最好是13以上版本在cmd命令行 中输入node -v 查看当前版本3、淘宝镜像cnpm install -g cnpm --registry=https://registry.npm.taobao.org在cmd命令行 中输入cnpm -原创 2020-07-17 11:37:46 · 391 阅读 · 0 评论 -
前端 VSCode常用插件
Html• HTML Snippets• HTML CSS Support• IntelliSense for CSS class names in HTML• HTML PreviewCSS• Css Peek• Beautify css/sass/scss/lessJavaScript• JavaScript (ES6) snippets• StandardJS - JavaScript Standard StyleAuto• Auto Rename Tag• Auto Clo转载 2020-07-17 09:00:21 · 195 阅读 · 0 评论 -
安装NVM之后,NODE -V 提示‘NODE‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
1、出现这个情况时,扪心自问,用nvm安装新的nodejs后有咩有执行这个命令:nvm use [nodejs version name]nvm use v10.15.32、如果已经执行了上述命令但还是报node不是内部命令云云,那么先检查 C:\ProgramFiles\nodejs文件是否可用,一般来说应该是不可用的,我就删除了(你也可以不先删除,若是下面操作没有问题就说明该文件夹无影响)。来到这一步,就需要打开nvm这个文件夹了,我的是在这个位置:C:\Users\Administr转载 2021-05-24 22:45:03 · 3767 阅读 · 6 评论 -
用脚手架整一个VUE项目
一、前端环境搭建环境搭建二、 全装脚手架 npm install -g @vue/cli-init三、通过vue init webpack 项目名 创建项目最后生成原创 2021-05-10 21:07:09 · 169 阅读 · 1 评论