Upward Force-优快云博客

原创自定义npm包并发布(全局包)

1. 在【36】目录中，创建一个包文件夹 npm_global_ceshi36----node_modules--------npm_global_ceshi2. 在包文件夹 npm_global_ceshi 的根目录下，初始化一个package.json文件（npm init -y）36----node_modules--------npm_global_ceshi------------package.json// 根据包信息配置package.json文件{“name”: “np

2021-05-27 17:20:47 872

原创自定义npm包并发布(本地包)

1. 在【自定义本地包】目录中，创建一个包文件夹 npm_publish_ceshi自定义本地包----node_modules--------npm_publish_ceshi2. 在包文件夹 npm_publish_ceshi 的根目录下，初始化一个package.json文件（npm init -y）自定义本地包----node_modules--------npm_publish_ceshi------------package.json// 根据包信息配置package.json

2021-05-27 16:47:53 2522

原创 Vue3.0进行开发环境、测试环境和生产环境配置

一、在 package.json 中配置打包命令配置前配置后运行 npm run serve => 启动项目并自动打开浏览器“serve”: “vue-cli-service serve --open”运行 npm run dev 打包开发环境包“dev”: “vue-cli-service build --mode development”运行 npm run test 打包测试环境包“test”: “vue-cli-service build --mode test”

2021-02-19 15:55:00 5673 1

原创 Vue3.0搭建脚手架

参考文档：https://www.cnblogs.com/similar/p/10411619.htmlhttps://www.cnblogs.com/skylineStar/p/9599828.html一、安装node.js1、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。2、安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应的版本号，就说明安装成功了。3、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v，就会

2021-01-26 15:54:14 758

原创 Vue项目适配移动端 + 适配PC端

一、适配PC端参考文档：https://www.cnblogs.com/wuqilang/p/13491766.html1、在 /src/assets 目录下新增 js 文件夹，在js文件夹中新增 flexible.js(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust

2021-01-23 09:31:55 4881 1

原创 Vue2.0项目根据线上环境分别打出测试包和生产包

1、来到package.json修改前修改后2、在 /build 目录下新增 test.js2.1 内容可以直接拷贝同目录下 build.js 的内容，但是需要修改三处地方2.2 修改前1、process.env.NODE_ENV = 'production'2、const webpackConfig = require('./webpack.prod.conf')3、const spinner = ora('building for production...')2.3、修改后

2021-01-21 17:22:17 1275 1

原创 Vue2.0搭建脚手架

一、安装node.js1、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。2、安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应的版本号，就说明安装成功了。3、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v，就会如下图所示，显示出npm的版本信息（另外需要注意的是，npm的版本最好是3.x.x以上，以免对后续产生影响）。到这里node的环境已经安装完毕了，npm包管理工具也有了，但是由于npm的有些资源被墙，为了更

2021-01-20 18:45:43 1376

原创微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示

一、实现整颗星星评分（默认一颗星）1.效果图2.准备图片3.remark.wxml<view class="stars"> <view wx:for="{{stars}}" wx:key="index" data-index="{{index}}" bindtap='score'> <image src="{{index > 0 && item.flag == 1 ? item.bgImg : item.bgfImg}}"&gt

2020-11-03 18:36:58 4873 3

原创 vue+animation动画实现跑马灯

1、单行显示，每行只显示一条效果图上代码<template> <div class="container"> <div class="box">  <ul :style="'width:' + lis

2020-07-04 14:57:30 873

原创钉钉小程序 + canvas实现环形进度条

1、在页面上添加 canvas 元素<canvas id="canvasId" width="{{200 * pixelRatio}}" height="{{200 * pixelRatio}}" style="width:200px;height:200px;background:pink"/>2、完成绘制圆环代码演示Page({ dat

2020-07-03 10:20:50 1052

原创钉钉小程序 - map组件 - 拖动地图选择位置并获取该位置的经纬度

钉钉小程序功能要求：在页面中输入地址名称，获取地址所对应的经纬度，然后传给服务器。但是钉钉小程序的map组件以及地图API貌似不支持这个功能，所以想了两个折中的方法：方法一将固定定位标记置于地图中心点，拖动地图，将需要搜索的位置拖至该标记点，然后获取地图中心点的经纬度，这就是我们所需要的经纬度了1、效果图2、代码演示json 文件{ "defaultTitle": "获取冷库位置"}axml 文件<map id="map" latitude="{{latitude}}" l

2020-07-02 18:32:16 5619 6

原创钉钉小程序+f2/my-f2实现折线图

参考文档：https://github.com/antvis/my-f21、效果图2、钉钉小程序默认初始化出来的项目是没有package.json的，需要新增package.json后再安装依赖，使用命令行 npm init --yes 创建 package.json 文件3、使用命令行 npm install @antv/my-f2 --save 安装依赖4、使用自定义组件test-my-f2.json 文件{ "usingComponents": { "f2": "@ant

2020-06-30 18:10:32 2652 9

原创钉钉小程序+f2/mini-chart实现折线图

参考文档：mini-chart1、效果图2、在GitHub上下载 mini-chart 组件，得到 mini-chart-master 文件3、首先，将 mini-chart-master/components 文件下的 line 组件，拷贝到自己项目的 mini-chart 目录中4、然后发现，line 组件依赖于 @antv/my-f2.js、…/mixins/methods.js、…/util.js，分别找到对应文件中对应的js，拷贝到自己项目的 mini-chart 目录中5、

2020-06-30 15:48:39 1888 4

原创微信小程序+f2/wx-f2生成折线图

1、效果图2、从GitHub上下载F2的微信小程序图表组件 wx-f2 ，

2020-06-30 11:40:27 3107

原创 vue+F2生成折线图

1、效果图2、打开命令窗口，通过 npm 安装F2npm install @antv/f2 --save3、使用 import 或 require 引入F2const F2 = require('@antv/f2');4、在页面上创建一个具备宽高的 canvas 标签，并指定 id：<template> <div class="container"> <canvas id="myChart"></canvas> </di

2020-06-29 16:18:01 1102

原创 html+F2生成折线图

1、效果图2、下载 f2.js，并放入自己的项目中3、在页面中通过 script 标签引入 f2.js 脚本<script src="./js/f2.js"></script>4、在页面上创建一个具备宽高的 canvas 标签，并指定 id：<canvas id="myChart" width="400" height="260"></canvas>5、编写图表绘制代码<!DOCTYPE html><html lang=

2020-06-29 15:39:34 1121

原创微信小程序+canvas+echarts循环数据生成折线图

1、下载GitHub上的 ecomfe/echarts-for-weixin 项目2、拷贝 ec-canvas 目录到自己的项目下3、效果预览4、在需要的页面创建折线图test.json{ "usingComponents": { "ec-canvas": "../../lib/ec-canvas/ec-canvas" }}test.wxml<view class="box" wx:for="{{ecLine}}" wx:key="index"> &

2020-06-29 08:59:00 1511 5

原创 html+js+echarts实现折线图、饼状图、环形图

1、从GitHub上下载 echarts.js 文件https://github.com/apache/incubator-echarts/blob/master/dist/echarts.js2、通过标签方式直接引入下载好的 echarts.js 文件<script type="text/javascript" src="js/echarts.js"></script>3、html+echarts实现折线图效果代码示例<!DOCTYPE html>&

2020-06-28 11:51:20 12076 2

原创 vue+echarts实现折线图

因为这里只演示了折线图，所以echarts引入方式是按需引入，大家如果需要用到其它种类图表的也可以全局引入所有组件1、效果图2、使用如下命令通过 npm 安装 EChartsnpm install echarts --save3、echarts在页面中完整引入var echarts = require('echarts');默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引

2020-06-28 09:46:42 2377

转载浏览器缓存机制详解

一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存

2020-06-27 17:54:17 263

原创微信小程序实现自定义导航栏

1、要实现自定义导航栏，首先得在全局进行相关配置app.json页面 "window": { ... "navigationStyle": "custom" },根据微信小程序官方文档的说法，只有客户端7.0.0以上版本才支持局部页面实现自定义导航栏，7.0.0以下版本只支持全体页面的自定义导航栏，自己项目里采用的是就是这种app.js页面App({ onLaunch: function(options) { var _this = this;

2020-06-26 11:32:04 5125 1

转载 pc页面自动缩放到手机端

pc页面自动缩放到手机端今天做了个pc的页面，看了别人的网站在手机端能把pc端的网页刚好缩放到手机端，看着很舒服。于是想把自己的页面也这样搞一下，刚开始，想到的是利用css3的缩放来做，想的是当屏幕尺寸改变时缩放整个页面，这样顺便写了个代码，但是在手机端却没有效果，然后仔细一想，手机端屏幕是不会变化的，根本无法触发window.onresize方法，再说，这样做了之后，在pc端改变屏幕尺寸后，页面是跟着缩放的，但是别人的网站在pc端改变屏幕尺寸时，是不会变化的，所以这样做肯定是错误的。然后开始百度，看

2020-06-26 09:55:12 1653 1

Upward Force的博客