![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2学习记录
vue2
0?0
这个作者很懒,什么都没留下…
展开
-
vue项目 对路由参数进行base64加密
1.安装依赖npm install --save js-base642.全局引入 main.jsimport * as Base64 from 'js-base64'Vue.prototype.Base64 = Base643.在页面中使用加密<router-link :to="{ path: '/List', query: { info: Base64.encode(JSON.stringify({ title: '这里是标题', module: 2 }原创 2022-05-20 14:08:20 · 867 阅读 · 0 评论 -
vue-cli 正式环境去掉console调试
正式环境去掉console调试使用babel-plugin-transform-remove-console插件npm i --save-dev babel-plugin-transform-remove-console在babel.config.js中配置const plugins = [];if(['production', 'prod'].includes(process.env.NODE_ENV)) { plugins.push("transform-remove-conso.原创 2021-03-26 14:10:20 · 527 阅读 · 0 评论 -
只引入一次scss文件
首先要安装 : sass-resources-loadernpm install sass-resources-loader --save-dev修改build/utils.js文件scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: [path.resolve(__dirname, '../src/a原创 2020-12-02 09:57:13 · 157 阅读 · 0 评论 -
vue webapp 合成海报,点击保存至手机本地
直接上代码了,找了好久base84转本地图片格式的,终于可以了,感谢公司另一位前端小姐姐~~成功保存到手机相册了,不过项目太赶没有用到,是让后台处理的,前端传给后台base64格式的,再返过来png或者jpg格式的图片<template><div> <div class="container" :style="bg" id="canvasPoster" v-if="showDom"> <p class="tit">///超多惊喜等你来///&原创 2020-11-24 16:40:57 · 864 阅读 · 2 评论 -
网络地址生成二维码
npm install -S qrcode页面引入 import QRCode from 'qrcode'使用components: { QRCode: QRCode },<canvas id="canvas"></canvas>getCode() { let _this = this; _this.$http.post(_this.$http.my_share_card).then(response => { if (.原创 2020-11-05 10:59:09 · 264 阅读 · 0 评论 -
公众号 微信支付的2种方法
1. 第一种 需要引入 weixin-jsapi // 通过config接口注入权限验证配置 _this.$http.post(_this.$http.wx_config,{ headers:{ 'Content-Type': 'application/x-www-form-urlencoded'原创 2020-09-14 09:43:15 · 577 阅读 · 0 评论 -
vue webapp 分享到微信好友及微信朋友圈
用模拟器试了好几次,分享服务列表返回的都是空数组,需要用真机测试,最终用真机测试正常HbuilderX配置如下vue页面的 scriptimport shareJS from "../request/share.js"var shareUrl = '', //分享链接detail = {}; document.addEventListener("plusready",function(){ shareJS.service() }, false);vue分享页面原创 2020-09-04 14:32:32 · 1996 阅读 · 0 评论 -
公众号 调用微信扫一扫,分享,授权登录
1.授权登录main.jsrouter.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); const openid = localStorage.getItem('openid'); // console.log("token",token,"openid",openid); if (!openid) { // console.log("path",to.path);原创 2020-08-15 09:45:53 · 1011 阅读 · 0 评论 -
vue webapp 调用 微信支付宝支付
记录一下 vueimport router from '../router/index'let Pay = new Object();Pay.getPay = function(data,type) { // console.log("pay",data,type); //获取支付通道 let wechatChanel = ''; let alipayChanel = ''; plus.payment.getChannels(function(channels原创 2020-08-12 16:45:04 · 1246 阅读 · 0 评论 -
vue+vant 上传图片压缩
最近有个手机端商家上传产品的项目,商城的操作几乎全在手机端完成。。。。真的是烧脑,都掉头发。。。。先记录一下吧,上传大图不压缩,页面太慢了 dataURLtoFile (dataurl, filename) { // 将base64转换为file文件 let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.leng原创 2020-07-23 17:48:20 · 836 阅读 · 0 评论 -
vue+vant 上拉加载,下拉刷新
<template> <div class="container"> <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh"> <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="..原创 2020-06-24 11:49:11 · 3663 阅读 · 0 评论 -
vue webapp 长按保存图片到相册
<template> <div class="container"> <div class="white-box"> <div class="erweima"> <img :src="user_qrcode" alt="" @touchstart="start"> <p>商家收款码</p> </div>原创 2020-06-24 11:40:00 · 2282 阅读 · 2 评论 -
vue webapp扫码支付和从相册中选择图片
直接上代码:<template> <div class="container"> <div class="scan"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <div class="f..原创 2020-06-24 11:36:38 · 454 阅读 · 0 评论 -
vue项目——第三天(跨域配置chrome)
浏览器——属性——目标链接后面空格 加上**–disable-web-security**我的如下:“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-securityC盘下面 创建文件夹 MyChromeDevUserData接着cmd 进行下面操作chrome.exe --disable-web-security --user-data-dir=c:MyChromeDevUserDa..原创 2020-06-15 16:25:28 · 414 阅读 · 0 评论 -
vue项目——第二天
静态页面已完成,把本地项目上传码云,git bash 命令行如下在码云创建仓库,复制https备用git initgit remote add origin 链接git pull origin mastergit add .git commit -m '描述'git push origin master最后一步报错解决办法git pull origin master --allow-unrelated-histories //把远程仓库和本地同步,消除差异git add .gi原创 2020-06-11 11:20:38 · 128 阅读 · 0 评论 -
Vue 项目——第一天
创建项目安装node-sass和sass-loader运行项目报错sass版本太高 需要卸载 重装解决办法npm uninstall sass-loadernpm install sass-loader@7.3.1 --save-loader引入vant库 vant原创 2020-06-08 18:10:58 · 121 阅读 · 0 评论 -
vue中多个页面公用一个头部
例如首页引用头部header.vue 头部<template> <div class="header"> <p>{{headTitle}}</p> </div></template><script>export default { name: "app-header...原创 2020-03-24 15:25:46 · 4175 阅读 · 0 评论 -
vue多商家购物车
参考链接:感谢效果图:代码如下:<template> <div class="container"> <van-nav-bar title="购物车" :right-text="showDel?'编辑':'完成'" :fixed="true" @click-right="onClickRight" ...原创 2019-11-15 16:41:32 · 648 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function.......
引用完scssnpm install node-sass --save-devnpm install sass-loader --save-dev后报错Module build failed: TypeError: this.getResolve is not a function…百度后是因为package.json中的sass-loader的版本太高,把8.0.0降低解决办法然...原创 2019-11-11 10:55:17 · 103 阅读 · 0 评论 -
解决vue中的跨域问题(Axios请求)
报错配置BaseUrl 找到目录(src->main.js)Axios.defaults.baseURL = '/api';配置代理 找到目录(config->index.js)'/api':{ target: ' ', //自己的域名 changeOrigin: true, //是否跨域 pathRe...原创 2019-11-08 18:03:09 · 568 阅读 · 0 评论 -
Vue相关开源项目汇总
目录UI组件 开发框架实用库服务端辅助工具应用实例Demo示例 UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui ★6253 - Vue 2的移动UI元素muse-ui ★3705 - 三端样式一致的响...转载 2018-12-11 10:17:32 · 390 阅读 · 0 评论 -
vue-cli 【flexible】屏幕字体自适应布局及配置
vue-cli 慢慢一步步走吧原创 2019-06-06 15:58:31 · 1724 阅读 · 0 评论 -
京东风格的移动端Vue组件库——NutUI(怒推)
官网http://nutui.jd.com/#/intro原创 2019-06-15 11:18:15 · 2297 阅读 · 0 评论 -
vue调试工具vue-devtools的安装使用
在github上下载vue-devtools插件 https://github.com/vuejs/vue-devtools 或者在github官网搜索vue-devtools 并下载cmd 进入vue-devtools目录,在vue-devtools目录下安装依赖包npm installnpm run build (这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>c...原创 2019-08-13 18:47:54 · 523 阅读 · 0 评论 -
在vue项目中引入nutui组件库
npm i @nutui/nutui -S原创 2019-08-12 16:27:54 · 5006 阅读 · 4 评论 -
在vue项目中引用并使用SCSS
引用SCSS已经使用vue-cli初始化过项目后,安装 node-sass和sass-loadernpm install node-sass --save-devnpm install sass-loader --save-dev在vue文件中就可以使用啦<style lang="scss"></style>使用SCSS样式里面有好多重复的,就搜...原创 2019-08-12 16:48:59 · 1054 阅读 · 0 评论 -
初学Vue------使用Vue-cli搭建项目
vue-cli是一个官方发布的vue.js项目脚手架,使用vue-cli可以快速创建vue项目,GitHub地址是:https://github.com/vuejs/vue-cli1. 安装node.js首先安装node环境,可以到官网下载安装包http://nodejs.cn/,安装完成之后,可以用命令行检查是否安装成功。2. 安装vue-cli安装好了node,可以直接全局安装vu...原创 2018-09-29 11:19:55 · 231 阅读 · 0 评论