一生为追梦的博客

场景：大家在利用构建工具进行应用最后的打包过程中，我们希望做到的是将业务代码和第三方引用模块代码分开打包.因为第三方引用模块代码通常很大，而且在不引入新的模块之前基本上是不会变动的。所以我们需要将这部分独立打包，并利用浏览器的缓存去提高应用程序的首屏加载速度。 所以我们利用CommonsChunkPlugin插件去抽取这些第三方的部分作为vendor.js独

vuex是用来管理项目的全局变量的，

转载自http://www.cnblogs.com/ye-hcj/p/7078047.html，另添加了一点补充此文章用来解释vue-cli脚手架build目录中的utils.js配置文件此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查...

一.开发环境安装nodejs、webpack，按网上教程即可二.vue-cli初始化项目拉取git已建好的项目名，在本地使用vue-cli初始化项目，按网上教程即可三.css处理方式（scss）使用scss方式处理css，首先安装scss：执行 npm install node-sass sass-loader --save-dev在vue的style标签中加入lang="...

转自：http://www.cnblogs.com/ye-hcj/p/7082620.html此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件此配置文件是vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置关于注释当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看上代码// 引入nodejs路径...

webpack作为构建工具平时作为前端作为优化、模块编程、和分片打包的重要组成部分,大家可能并不陌生，如果没有时刻的去关注文档，那么大家可能不太清楚webpack已经默默然的升级到2.x了，对比1.x版本，webpack2的文档结构和代码提示都非常友善。webpack从1.x升到2版，并没有作为大的更改改动，而且内部的接口文档形式也与1基本无修改，那么对比webpack2版本 我们对webpa...

这个方法可牛比了。这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。干货在后面，绝对惊喜。首先看一下官方的定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个已...

本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在git...

参考一下两个链接，能充分理解其原理https://blog.csdn.net/u010692018/article/details/78799335/https://blog.csdn.net/M6i37JK/article/details/78140159

首先上代码说总结：<mt-field label="卡号" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field>methods: { submitand(card) { console.log('1111', card); }} 使用@blur.native.capture=""即可实

原文作者: Sarah Drasner原文链接: The Power of Custom Directives in Vue当你最初学习JavaScript框架的时候, 有点像一个小孩在一个糖果商店里面. 你接受一切对于你来说可用的东西, 它会让我们的开发变得更简单. 尽管如此, 我们都有一个经验: 框架不是万能的, 不可能全面覆盖各种各样的情况.令人兴奋的是, Vue的功能令人难以置信的丰富. ...

效果如图：步骤：Ctrl+shift+p呼出sublime安装插件窗口：1.安装Package Control2.执行Install Package3.安装Vue Syntax Highlight安装好后重新打开代码即可。

注意：这个是1.2版本的配置，现在1.3版配置已经不是这样了下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置...

按官方文档，只要写成：<div> <mt-field label="密码" placeholder="请输入密码" v-validate="'required'" data-vv-name="password" :class="{'is-danger': errors.has('password') }" :type="passwordType&quo

这是由于this的指向造成的。普通函数的this谁调用它，它就指向谁，换句话说，普通函数中的this指向是变化的，指向使用函数时的指向。而箭头函数不同，箭头函数的this指向是固定不变的，指向定义时的指向。因此，当定时器异步执行时，执行环境已发生了变化，this指向了window，无法找到定义时指向的变量，所以会报错。错误代码如下：this.obj = setInterval(function()...

vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。全局组件引入写法：在项目的main.js中：import Vue from 'vue';import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件Vue.use(MyComponent); /...

转自：https://segmentfault.com/a/1190000008570622 用于以后自己参考生命周期先上图什么是生命周期Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在...

简单一句话说：ES5以前读、写对象的属性时，只改变其值；ES5以后，可以通过getter和setter方法，在读写对象的属性时，进行开发者自定义操作。今天学习vue的深入响应式原理，需要了解getter和setter，经过一番研究后，写一下自己的理解。举个例子：在使用set时，不仅实现了赋值，还可以顺带打印出赋的值。set setparam(param) { this.param = param...

　　我们要实现的很简单，就是点击+1的count加一，点击-1的时候count-1　　一、mutation　　在vuex 中，只有mutation 才能改变state.  mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，action去commit ...

转自：https://segmentfault.com/a/1190000009404727如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件...

最近有一个需求，本项目需要做统一身份认证，通过单点登录方式实现。简单来说，就是A企业有很多系统，使用的是同一套认证方式，并且打算使用我们的系统，希望我们可以对接他们的认证方式，只要他们授权通过，我们就不需要再使用用户名密码登录。我们的项目前后端分离，前端使用vue、axios，前端服务端口80，后端使用Java SpingBoot，nginx，服务端口8080。操作的思路如下：在浏览器...