项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。而且Element-UI支持IE10+及大多数浏览器。由此要用到Babel，主要用于将ECMAScript 2015+代码转换为旧浏览器或环境中向后兼容的JavaScript版本。在此之前，需要先搞清楚IE6~11是否支持es5： IE6~IE8:不支持es5的所有语法;IE9:支持除ECMAScript ...
使用全局路由守卫实现 前端定义好路由，并且在路由上标记相应的权限信息 const routerMap = [{path: /permission,component: Layout,redirect: /permission/index,alwaysShow: true, // will always show the root menumeta: {title: permission,icon: lock,roles: [admin, editor] // you can set roles in root nav},children: [{path: page,component: () => import(@/views/permission/page),name: pagePermission,meta: {titl...
前言 最近有点闲，想起关注已久的mpvue写小程序，所以稍微肝了半个多月写了个github版的微信小程序，已上线。现在总结一下遇到的坑。 扫码体验、项目地址：https://github.com/cheesekun/wx-githubmina坑 scroll-view 高度 可滚动视图区域。 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。小程序提供的scroll-view组件，想让他能滚动，就要给他提供一个固定的高度。 我们一般需求是，上一块区域固定，...
最近用mpvue开发了一个小程序，现总结一下碰见的问题及解决方案1.项目中数据请求用到了fly.io，封装成request.js如下： import wx from wx import Fly from flyio import store from ../store/indexconst fly = new Fly()fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000//http 请求拦截器 fly.interceptors.request.use((config) => {wx.showNavigationBarLoading()//导航条加载动画//给所有请求添加自定义h...
使用vue也有很多年了，一直都没有整理一下相关知识，给大家总结下开发过程中所遇到的一些坑，主要给大家总结一下vue组件传值的几种常用方法： 1、通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:/B,query:{id:1}}) ② B组件接收 this.$route.query.id2、父组件向子组件传值 使用props向子组件传递数据 子组件部分：child.vue <template><div><ul><li v-for=(item,index) in nameList :...
利用 webpack 给生产环境和发布环境配置不同的接口地址在开发时，前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换，让人十分恶心。第一步，在webpack配置文件中，分别设置不同的接口地址 打开dev.en.js文件。修改如下： var merge = require(webpack-merge) var prodEnv = require(./prod.env)module.exports = merge(pr...
默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。 1. 在axiosconfig目录下的axiosConfig.js import Vue from vue import axios from axios import qs from qs import { Message, Loading } from element-ui // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withCredentials = true // 配置请求头 axios.defaults.headers...
1.原理vue的双向数据绑定的原理相信大家都十分了解；主要是通过ES5的Object对象的defineProperty属性；重写data的set和get函数来实现的 所以接下来不使用ES6进行实际的代码开发；过程中如果函数使用父级this的情况；还是使用显示缓存中间变量和闭包来处理；原因是箭头函数没有独立的执行上下文this；所以箭头函数内部出现this对象会直接访问父级；所以也能看出箭头函数是无法完全替代function的使用场景的；比如我们需要独立的this...
webpack4 released 已经有一段时间了，插件系统趋于平稳，适逢对webpack3的打包速度很不满意，因此决定将当前在做的项目进行升级，正好也实践一下webpack4。新特性0配置 应该是parcel出来以后，webpack团队意识到其配置确实有点复杂，不太容易上手。so, webapck4 开始支持0配置启动。不过，万变不离其宗，webpack4的0配置也只是支持了默认entry 和 output而已，即默认entry为./src,默认output为/dist。 模式选择mode mode有两个可选...
对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。 第一招：化繁为简的Watchers场景还原： created(){this.fetchPostList() }, watch: {searchInputValue(){this.fetchPostList()} }组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表这个场景很常见，有没...
我个人常用的方法，一直在摸索更好的方法，如果各位大佬有什么建议，可以给我评论留言哦 1、import方法 第一步：在.vue文件中import edit from path（path是图片与.vue的相对路径） 第二步：在data对象中定义一个属性edits，值对应edit第三步：在template中 给标签绑定属性最后刷新界面看效果就可以了！ 2、static方法 第一步：图片放在static文件夹，在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径第二步：在te...
前言临近毕业，写了个简单个人博客，项目地址是点我访问项目地址（顺便求star），本篇是系列总结第一篇。接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件。 正文Vue 单文件组件开发当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。 // 注册 Vue.component(my-component, {template: <div>A custom component!</div> })// 创建根实例 new...
基于vue-cli做了好几个项目了，想把一些自己的常用设置写出来，磨了好久，一看vue-cli3.0都快出来了，不能再磨了。。 路径相关 css内引用的资源 build -> utils.js// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {//less// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextP...
如下所示： <div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4"> <h1 style="color:red">我是script标签模板4</h1> </script> <script> var vm=new Vue({ el:"#app", data:{ message:1 }, //第2种模板 写在构造器里 //template:`<h1 style="color:red">我是选项模板2</h1>` //第3种模板 写在<temp...
首先我们先分享一下源码：https://github.com/kunfan96/vue-admin 对于我这种刚开始用Vue做项目的菜鸟来说在组件数据定义方面犯了很多错误,尤其是在这个页面在进行数据回选的时候自己重定义已经定好的数据,导致数据非常杂乱无章,具体在storeDetail.vue的14--321行,感觉这么多数据非常有必要的进行裁剪,用js进行运算把数据补充完整,这里相对把后台的任务减轻了很多,只是额外增加前端渲染数据的量 父子组件数据通讯问题 刚开始写Moda...