vue
详解vue静态资源打包中的坑与解决方案
本文主要解决： 1、vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; 2、静态资源打包使用相对路径后css文件引入图片路径错误问题。一、问题 vue-cli脚手架生成的默认打包配置文件情况下运行npmrunbuild打包后，部署项目至特定路径下：如：//ip:port/public/spri...
Vue打包项目图片等静态资源的处理
项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。但是，当项目中引入资源的，比如：引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。1、在vue文件引入图片 例如，我们将一张图片放到资源目录/static/image/lyf.jpg我们在vue文件中用下面的代码...
vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
一、开发环境中跨域 使用Vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过Vue-cli创建的项目，可以直接利用Node.js代理服务...
vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"
首先确认watch是一个对象，一定要当成对象来用。对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化，或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。 值也可以是函数名：不过...
Vue侦听器watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如：<divid="watch-example"><p>Askayes/noqu...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了，大致是几部： 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 3、在main.js导入iconfont.css文件import'./assets/iconfont/...
Vue脚手架（vue-cli）搭建和目录结构详解
一、环境搭建 1、安装node、npm、webpack，不多说 2、安装vue-cli脚手架构建工具，打开命令行工具输入：npminstallvue-cli-g，安装完成之后输入vue-V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。二、用vue-cli来构建项目 1、...
Vue-router路由基础总结（二）
一、命名路由 有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建Router实例的时候，在routes配置中给某个路由设置名称。 我们直接在路由下添加一个name即可。constrouter=newVueRouter({routes:[{path:'/us...
Vue-router路由基础总结（一）
一、安装 npm下载：npminstallvue-router 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：在你的文件夹下的src文件夹下的main.js文件内写入以下代码importVuefrom'vue'importVueRouterfrom'vue-router'Vue.us...
模拟源码深入理解Vue数据驱动原理（2）
我们说到如果监听的属性是个对象呢？那么这个对象中的其他属性岂不就是监听不了了吗？如下： 倘若user中的name、age属性变化，如何知道它们变化了呢？今儿，就来解决这一问题。 通过走读Vue源码，发现他是利用Observer构造函数为每个对象创建一个Observer对象，来监听数据的，如果数据中的属性又是一个...
模拟源码深入理解Vue数据驱动原理（1）
Vue有一核心就是数据驱动（DataDriven），允许我们采用简洁的模板语法来声明式的将数据渲染进DOM，且数据与DOM是绑定在一起的，这样当我们改变Vue实例的数据时，对应的DOM元素也就会改变了。 通过粗浅地走读Vue的源码，发现达到这一效果的核心思路其实就是利用ES5的defineProperty方法，监...
vue实现数据驱动视图原理
一、什么是数据驱动 数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。 比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程，我们对butt...
vue-resource文档详细解读
Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的HTTP请求接口和...
vue-resource的使用中需要注意的坑
先看一段代码：exportdefault{name:'app',data(){return{articles:[]}},created:function(){this.$http.get('/api/user/order/list',{productType:"1",pageNum:1,pageLimit:8},{...
vue-resource基本使用方法
一、vue-resource特点 1、体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2、支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE9以下的浏览器，其他主流的浏览器都支持 3、支持...
