此功能基于vue（v2.6.8） + typescript（v3.3.3333）, 引入极验（geetest v3+）（官方api），使用其product: bind模式， 页面挂载后初始化ininGeetest，点击登录按钮后先做表单验证，通过后弹出滑块框，拖动验证成功，执行登录方法。 本项目为前后端分离，所以后端部署部分，请自行参考文档操作后台接口：开始：/public/js目录添加 jquery-1.12.3.min.js文件 和 gt.js（下载）在/public/index.html中引入以上添加的两个文件login.v...
在vue.js定义模板时，可以定义多个模板，然后在components组件中调用模板，显示在界面上，注意components后面是一个对象，而不是数组。下面利用实例说明，操作如下：第一步，在HBuilderX设计工具中，在指定的文件目录下新建一个静态页面，并引入vue.js核心文件，如下图所示：第二步，在<body></body>标签内，插入一个div标签，并设置对应的ID属性，如下图所示：第三步，接着在div标签中插入一个script标签，定义三个模板User、Stud...
业务场景微信端项目是基于Vux + Axios构建的，关于图片上传的业务场景有以下几点需求: 1、单张图片上传(如个人头像,实名认证等业务) 2、多张图片上传(如某类工单记录) 3、上传图片时期望能按指定尺寸压缩处理 4、上传图片可以从相册中选择或者直接拍照 遇到的坑采用微信JSSDK上传图片在之前开发的项目中(mui + jquery)，有使用过微信JSSDK的接口上传图片，本想应该能快速迁移至此项目。事实证明编程没有简单的事: 1、按指定尺寸压缩...
批处理 前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用 批处理 对前端构建进行部署 git地址 目录分为三块 single //单页代码 share // 共用代码 many //多页代码只需要用到 批处理 对其中两者进行合并就能生成想要的...
什么是骨架屏？ 简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。本文就是根据 page-skeleton-webpack-plugin 实现的骨架屏的实现，基于的是vue-cli3进行采坑 。 项目开始 安装依赖，package.json 配置vue.config.js 需要在新建vue.config.js，把之前的下载好...
让 babel webpack vue 配置文件支持智能提示，下面给大家介绍的非常详细，一起看看吧 如果非脚手架搭建的项目，往往需要手动配置 babel webpack。 每次都要打开官网，复制黏贴，然后一个一个配置。 如果配置也能智能提示，岂不美哉。 babel 配置如果原先是 .babelrc 配置，请改成 .babelrc.js 或者 babel.config.js 然后安装依赖 npm i -D @types/babel__core 或 yarn add -D @types/babel__core 接着在配置文件里加上 @type {im...
在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。） 1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。 2. 修改package.json里的script命令： 配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自...
vue-cli输入命令：npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解决：到config文件夹中打开index.js文件。 文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：assetsPublicPath属性作用是指定编译发布的根...
1.如何引入 在vue-cli里，引入文件有几钟方法 一种是用npm或者cnpm指令去下载对应的插件，然后在main.js里用import方法引入，这里不讨论这种方法 我比较喜欢采用的是直接下载对应的js，然后引入到vue项目中去 问题来了，如何引入呢 方法如下： 下载对应的js文件或者css文件，一般下载插件相关联的都会在一起进入vue-cli项目工程里的index.html文件,分别引入css文件和js文件在这里，分别是 <link rel="stylesheet" href="./static/l...
本文实例讲述了vue使用websocket的方法。分享给大家供大家参考，具体如下： 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了，直接使用原生的websocket 我这边需求是 只需要接受就好 不需要发送 代码如下： 爬坑之路：vue里面this指向问题 第一版 使用原生js mounted(){console.log(this)----------------------------------------------------------this指向...
在使用Vue.js时，可以使用Vue.extend()方法创建一个子类，传入参数包含了一个对象。其中，在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明，操作如下：第一步，创建一个静态页面并引入vue.js文件，并在主体元素标签中插入一个div，设置id属性，如下图所示：第二步，在<script></script>标签中调用Vue.extend()，设置template和data，如下图所示：第三步，使用new关键字调用$mount()，将创建的类挂载到div元素...
背景： 多人协作模式下，修改代理比较麻烦，而且很容易某个开发人员会修改了vue.config.js文件后提交了。 第一，很容易引起冲突。 第二，很容易出现代理错误，需要排查。而且现在微服务盛行，在生产环境下有网关配置，不会出错，但是在本地调试会造成麻烦，如修改了代理地址需要同步修改代理中的地址，很麻烦也很容易出错。 解决思路： 1.开发中定义常量js文件，例如constants.js。用户存放各个服务需要代理的服务名。 let api = ...
vue实现不同服务器代理，接上篇，虽然可实现多版本代理，但是每增加一种模式就需要重下新修改vue.config.js以及.env.dev.local，感觉很不智能，扩展性挺差。 主要实现思路： 模仿vue中.env.local文件，此文件被git忽略，且可根据当前环境变量加载不同的数据，由此在项目根目录下新建development文件夹，在development文件加下建立config文件夹，用户放置配置文件，config下目前暂有两个文件 config.development.local config.ownd...
前言 有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。 安装vue-i18n我们使用npm安装vue-i18n。 npm install vue vue-i18n --save引入vue-i18n首先在 main.js 中引入 vue-i18n。 import Vue from vue import App from ./App import VueI18n from vue-i18nVue.use(VueI...
使用场景重复点击或者多tab标签使用一个视图等（当然也可以用加载中或者透明背景禁止请求中再次点击） 封装代码来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => {for(let p in pending){if(pending[p].u === config.url + & + config.method) { //当当前请求在数组中存在时执行函数体pending[p].f(); //执行取消操作p...