Vue.js
Vue.js
陆氪和他的那些代码
小氪报主理人,惠权科技创始人。不仅分享日常代码爬坑,且每日拆解一条百里挑一的小众消息(Blink):新商业观察、科技互联网、公私域流量、自媒体运营、工具效率、职场生活、健康养身、奇怪的小知识和一些小道消息(添加主页小地球可直接看到源头朋友圈资讯)。
展开
-
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案原创 2024-03-28 10:49:23 · 993 阅读 · 0 评论 -
Vue.js - 通过 Vue.prototype 定义原型属性实现全局变量
Vue.js - 通过 Vue.prototype 定义原型属性实现全局变量原创 2023-12-02 12:25:26 · 203 阅读 · 0 评论 -
前端 - 接口请求抓包 Status Canceled 分析
前端 - 接口请求抓包 Status Canceled 分析原创 2023-07-12 10:34:23 · 2800 阅读 · 0 评论 -
Vue.js - 新页面初始化到最顶部位置(Vue.js 版)
Vue.js - 新页面初始化到最顶部位置(Vue.js 版)原创 2019-02-11 21:41:15 · 2409 阅读 · 0 评论 -
Vue.js - Header 上下滚动渐隐渐现效果(Vue.js 版)
Vue.js - Header 上下滚动渐隐渐现效果(Vue.js 版)原创 2019-02-11 21:32:12 · 1979 阅读 · 0 评论 -
Vue.js - 自定义动画组件(Vue.js 版)
Vue.js - 自定义动画组件(Vue.js 版)原创 2019-02-11 21:45:32 · 732 阅读 · 0 评论 -
Vue.js - 全局事件解绑(Vue.js 版)
方法一因为 keep-alive 组件多了一个 activated 生命周期多了一个 deactivated 生命周期 // 页面隐藏或被替换时调用方法二用 mounted & unmounted 生命周期代码mounted () { window.addEventListener('scroll', this.handleScroll)},......原创 2019-02-11 21:38:45 · 465 阅读 · 0 评论 -
Vue.js - 项目打包后 dist 文件目录详解
js 文件夹app.js放的是项目中各个页面的逻辑代码,将格式进行了压缩。 chunk-vendors.js:放的是通过import包导入的第三方依赖包。防止该文件体积过大,可以使用webpack的externals配置。凡是声明在externals中的第三方依赖包,都不会被打包。同时需要在index.html文件的头部,添加CDN资源引用。 其他.js文件是使用路由懒加载打包后的文件,按需导入路由,文件的名字是路由懒加载配置中的分组名称。 .js.map依然是一个Source map文件,Sou转载 2021-02-05 14:48:50 · 7509 阅读 · 0 评论 -
Vue.js - 动态编译(添加)第三方组件(Element UI 案例)
看到这标题,老实说一开始第一个想法是难道用:Vue.compile?render?发现门槛有点高,因为第三方组件是在 HTML 块上已经编译好了的,所以如何用 JS 再动态添加再编译呢?于是,想到 Vue 的更新原理:只要触发它的数据就可以重新编译组件成 HTML 代码,那么只要把数据传到数组里(用 for 循环和 if 判断组件类型即可)扔过去不就完事了,唯一的缺点就是,每次都要从头到尾......原创 2019-10-24 22:52:18 · 2495 阅读 · 0 评论 -
Vue.js - Vue 中如何引入第三方 JS 库
我们以 JQuery 为例,来讲解~一、绝对路径直接引入,全局可用主入口页面 index.html 中用script标签引入:<script src="./static/jquery-1.12.4.js"></script>这样,其实就已经可以在项目中使用 JQuery 了。mounted () { console.log($)}......转载 2019-10-21 22:20:29 · 2527 阅读 · 0 评论 -
Vue.js - 基于 Vue SEO 四种方案
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说。1.SSR服务器渲染;2.静态化;3.预渲染prerender-spa-plugin;4.使用Phantomjs针对爬虫做处理。1、SSR服务器渲染关于服务器渲染:Vue官网介绍,对Vue版本有要求,对服务...转载 2019-10-19 23:53:47 · 1210 阅读 · 1 评论 -
Vue.js - Vue 项目引入 JQuery 框架
既然写项目,那么少不了用 JQ,那我们就引入进来吧~1、因为已经安装了 Vue 脚手架,所以需要在 Webpack 中全局引入 JQuery打开 package.json 文件,在里面加入这行代码,jquery 后面的是版本,根据你自己需求更改。dependencies:{ "jquery":"^2.2.1"}2、然后在命令行中 cnpm install......转载 2019-10-19 01:28:48 · 1393 阅读 · 0 评论 -
Vue.js - Axios 访问 Java 后端跨域问题(支持 Cookie)
解决方案1、前端(Vue)配置axios.defaults.withCredentials = true2、后端(Java)配置public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void doFilter(ServletRequest re...原创 2019-10-14 22:50:46 · 977 阅读 · 0 评论 -
Vue.js - axios interceptor 中断请求继续执行方法
Ps:throw SyntaxError(),通过报错来斩断请求继续的问题,如下案例:http.interceptor.response((response) => { /* 请求之后拦截器 */ const res = response.data if (res && res.error && res.msg === 'xxx') { // 未......原创 2019-09-24 09:47:04 · 3469 阅读 · 0 评论 -
Vue.js - vue-clipboard2(Vue 剪切板功能)
1、安装npm install --save vue-clipboard22、在 main.js 中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3、例如data() { return { msg: '' }},methods: { copy(e...原创 2019-09-11 23:56:27 · 1744 阅读 · 0 评论 -
Vue.js - 全局 this 复制备份
let that = this // 错的export default { mounted { that = this // 对的 }}原创 2019-09-08 02:16:39 · 693 阅读 · 0 评论 -
Vue.js - 单页面 SPA ,IOS 端页面跳转后调用微信 JSSDK 时报错: “invalid signature“ 解决方案
背景1、JS接口安全域名 OK2、Android手机,微信开发者工具,测试分享都没问题问题在IOS手机微信端,从A页面(http://a.com/A)跳转到B页面(http://a.com/B)后,B页面进行分享时就会报签名(invalid signature)错误。分析从A页面跳转到B页面时,由于是使用vue-router切换,都是操作浏览器历史记录,所以io......原创 2019-09-04 10:10:05 · 1847 阅读 · 3 评论 -
Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)
0、前言移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。 原因:移动端的双击会缩放导致click判断延迟。1、兼容性iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及......转载 2019-02-09 19:23:39 · 3036 阅读 · 0 评论 -
Vue.js - WebApp meta 移动端配置
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0原创 2019-02-09 19:38:25 · 1979 阅读 · 0 评论 -
Vue.js - 核心
【序号】表示后期插入的知识点~1、Hello World2、双向绑定语法:v-model简介:v-model 是一个模板指令input里面value的内容输入什么,下面content的内容就会显示出来。3、数据绑定语法:{{}}【1】、属性绑定语法:v-bind ~ :简介:title='title'后面的title不是个字符串 而是js的表达式 (new 实......原创 2019-02-13 10:48:07 · 875 阅读 · 0 评论 -
Vue.js - 常见问题
1、子组件中data和props的区别?- 子组件中的data数据,不是通过父组件传递的是子组件私有的,是可读可写的。- 子组件中的所有 props中的数据,都是通过父组件传递给子组件的,是只读的。2、Vue模板里面不要出现表达式代码,把表达式代码放在逻辑代码里。3、解决部分不支持ES6而白屏现象:babel-polyfill。4、@touchstart.prevent 解决真机测......原创 2019-02-13 11:02:29 · 405 阅读 · 0 评论 -
Vue.js - Vuex
1、store包,省略掉 Action(异步操作) 过程也可以,直接commit $store2、mapState3、mapMutations4、mapGetters5、getters 类似 computed 计算属性的作用6、Module原创 2019-02-13 11:05:57 · 506 阅读 · 0 评论 -
Vue.js - 引入外部 JS 文件
一、外部文件 config.js第一种写法:// 常量的定义const config = { baseurl:'http://172.16.114.5:8088/MGT2'}// 函数的定义function formatXml(text) { return text}// 导出 {常量名、函数名}export {config,formatXml}第二种写......原创 2019-03-14 12:57:37 · 1695 阅读 · 0 评论 -
Vue.js - 项目打包问题集
Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。1、js路径问题脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’。build: { assetsPublicPath: './'}2、img 路径......原创 2019-07-07 23:33:13 · 637 阅读 · 0 评论 -
Vue.js - Vue下使用perfect-scrollbar(在特定框架里使用一款并非为该框架定制的库/插件)
其实,如何在特定框架里使用一款并非为该框架定制的库/插件,只有两点:1. 熟悉这个框架2. 熟悉这个库/插件的工作原理说完废话,进入正题。perfect-scrollbar是一款轻量级的滚动插件,具体介绍详见其官网你只需要知道它绝对不是为了vue设计的,和vue没半毛钱关系。那么如何完美的融合其中呢?以下是我的步骤:首先,安装包npm install perfe.........原创 2019-07-08 10:08:41 · 3804 阅读 · 0 评论 -
Vue.js - 数组和对象的赋值动态变化 & 克隆
这篇文章主要介绍了 vue 数组和对象不能直接赋值动态变化 & 克隆情况和解决方法,需要的朋友可以参考下。一、直接赋值动态变化1.1、Vue 不能检测以下变动的数组当你利用索引直接设置一个项时,例如vm.items[indexOfItem] = newValue当你修改数组的长度时,例如vm.items.length = newLength1.......原创 2019-07-12 15:15:53 · 11028 阅读 · 0 评论 -
Vue.js - 如何解决Vue项目IP地址无法访问的问题?
Vue脚手架vue-cli起的webpack项目,用localhost可以正常访问,切换到ip就提示无法访问此网站,下面是详细的介绍。在编写项目时,有的时候localhost的链接是可以正常访问的,但是我们需要在其他设备上也访问到改地址,所以就需要ip地址进行访问了,但是ip访问提示我们无法访问此网站。查看 config 文件夹下的 index.js修改index.......原创 2019-08-06 23:01:02 · 3783 阅读 · 0 评论 -
Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案
1、最好把 favicon.ico 放到 index.html 放到同一目录2、在 webpack 配置文件里面配置// 在 webpack.dev.conf.js 里面的 plugins 配置new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: tr......转载 2019-08-12 00:11:26 · 1688 阅读 · 0 评论