在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的http库，可运行在浏览器端和node.js中。当项目越来越大的时候，接口的请求也会越来越多，怎么去管理这些接口?多人合作怎么处理?只有合理的规划，才能方便往后的维护以及修改， 安装 安装axios依赖包 cnpm install axios --save 引入 一般会我会在项目src中新建一个untils目录,其中base用于管理接口域名，http处理请求拦截和响应拦截，user.js负...
（1）props属性： 在父组件中，可以通过子组件标签属性的形式将数据或者函数传给子组件，子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件： 一般的属性值都是用来给子组件展示的子组件传数据给父组件 属性值为函数类型的，一般是用来子组件向父组件传递数据，子组件通过调用父组件传过来的函数，可以修改父组件的状态数据缺点： 隔层组件间传递: 必须逐层传递(麻烦)兄弟组件间: 必须借助父组件(麻烦)注意： //...
github pages 是 github 免费为用户提供的服务，写博客，或者部署一些纯静态项目。 最近将 vue cli 3.x 初始化项目部署到 github pages，踩了一些坑，记录如下。 https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑，就开启了 vue-router 的 history 模式，去掉了 #。平时做项目也是默认开启 history 模式。折腾了半天发现，我这是部署到 github pages ，服务器没有配置，导致页面一直请求...
由于最新版本的vue-cli已经放弃dev-server.js，需在webpack.dev.conf.js配置才行 新版本的webpack.dev.conf.js配置如下： const express require(express) const app =express() var appData = require(..data.json) var seller = appData.seller var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use(/api, apiRoutes)找到devServer后，在最后面添加： before(app) {app.get(/api/...
前言 现如今前后端分离开发越来越普遍，前端人员写好页面后可以自己模拟一些数据进行代码测试，这样就不必等后端接口，提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的。 主体 项目是基于vue-cli的，首先必须搭建好vue项目环境。如果有同学不知道如何搭建vue项目，可以参考我的另外一篇文章。因为mock数据需要借助node.js中express框架，所以必须先在项目中安装npm install express --save。 搭建完基础后...
前言 除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 父子组件通信props 和 $emit 父子组件通信子组件有时需要与父组件进行沟通，沟通的方式就是子组件 emit 事件，父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props 假设这里有一个父组件并引入了一个子组件 my-comp： <my-comp v-for="msg in msgs" :key="msg.id" :msg="...
脚手架是啥 从前我总觉得脚手架是个很高大上的东西，好像得牛叉:ox:一点的人才写的出来，可望而不可即。其实并不是因为困难使我们放弃，而是因为放弃才显得困难（这是个好词好句:see_no_evil:）。只要你肯花个一天半天的时间:fist:，也能写出属于你自己的脚手架。 早前脚手架这个词是从 vue-cli 这里认识的，我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项...
本文将通过解读render函数的源码，来分析vue中的vNode是如何创建的。在vue2.x的版本中，无论是直接书写render函数，还是使用template或el属性，或是使用.vue单文件的形式，最终都需要编译成render函数进行vnode的创建，最终再渲染成真实的DOM。 如果对vue源码的目录还不是很了解，推荐先阅读下 深入vue -- 源码目录和编译过程。 01 render函数 render方法定义在文件 src/core/instance/render.js 中Vue.prototype._render = funct...
Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解。举个例子，通知组件notification基本是现代web开发标配，在很多...
这个地方坑比较多，查看网上并没有详细的文档，新手一般写到这里很痛苦。这里我只介绍一下我解决的方案，虽然它不是最好的，但是可行的方案； 总体分两步 1）跳到微信支付链接，它会自动拼接上code 2）获取本网址，截取code； 在vue中哪里获取code？ 在路由钩子函数beforeEach获取。（如果想了解beforeEach的用法，请关注我下一篇博客）。我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appid ...
写在前面vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到CLI service里去了，从而所有的配置文件在初始化的项目中并没有生成。初次生成项目的时候可谓是完全懵的，无论是baidu还是google，对于3.x的介绍几乎就没有，仅有的一些也只是项目的一些生成流程，那...
昨天在用vue开发项目的时候遇到一个坑，在群友的探讨中，成功的解决了这一问题。具体情形如下：使用vue开发，在页面中有一个人数统计组件，人数统计是要动态变化数据的，由于目前没有真实数据，那么我想的是用随机数和setInterval来改变data里面的数据，从而做到数据实时变化，这样方便与我来做数字翻页动画。代码如下：<template><div class="totel-number"><div class="panel-top"><div class="panel-top_Left"></div><div class...
在此主要介绍 如何使用 formData 对象上传单文件和多文件，FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。 过多介绍不说，过多的煽情语句不说，直接来来干活，希望对广大博友有所帮助。也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数<!--文件上传表单--> <form><input type="text" value="" v-model="name" placeholder="请输入用户名">...
前言 最近，公司的PR提了一个需求 自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用vue做了，感觉效果还行，在这分享一下我是如何做的 希望对大家有一点点帮助。 效果图附上线上地址 在线预览：新品租赁页 1：页面的构建及优化 所谓的活动页 首先第一步肯定是把页面切出来，这里就是2*n页面 我这里用的就是grid布局（也可以用flex）我主要讲三个点： 1:关于图片的优化 由于后段传过来的图片...
1 安装首先，通过 npm 安装 vue-router 插件：npm install --save vue-router安装的插件版本是：vue-router@3.0.2 2 用法2.1 新建 vue 组件在 router 目录中，新建 views 目录，然后新建两个 vue 组件（一个页面就对应一个组件）。index.vue：<template><div>首页</div> </template><script>export default {name: "index.vue"} </script><style scoped></style>about.vue：<template><div>关于我们</div> </template><script>exp...