我的项目是用vue提供的vue-cil脚手架生成的项目,但是当我在项目中使用async/await,编译代码的的时候报了regeneratorRuntime is not defined的错,我查过资料,是因为你的项目中没有使用transform-runtime将es6抓换成es5 注意:不建议使用babel-polyfill,因为这个太大了,现在6.0版本的babel改成了插件的形式,现在推荐的是transform-runtime 第一步:下载babel-polyfill, npm i bab…

在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的项目里的非父子组件来说,它们一方面不适用props,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题. 1.创建中央事件总线 可以使用多种形式创建Event Bus. Example 1: // main.js import Vue from 'vue…

前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标弹出相关信息的弹窗,并且能够同时打开多个.这时就可以用Vue.extend方法手动挂载弹窗组件. 举例: // 目录结构 /registry /videoDialog videoDialog.vue index.js /XXXDialog ··· index.js // videoDialog/index.j…

vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷贝官方的 准备工作 新建文件夹D:\03www2018\study\vue2017,下面根目录指的就是这个目录 生成package.json, 根目录>npm init 安装webpack和webpack开发服务器, 根目录>cnpm i -D webpack webpack-dev-server…

前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开的端口 正文 开发环境中的跨域 首先,要确定后台服务的ip与端口 这里我的后台开的是 localhost:8081 npm run serve在8080端口 一般我们使用ajax请求的时候,会可以把url ip:port/api 写在ajax请求的url参数中 this.axios.get("loc…

在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' directives Eslint规则检查显示如下: 报错信息如下: [eslint-plugin-vue] [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives. 1 2 3 这是因为我们安装了…

我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入到输入框的字符.例如,首个字符是0或者非数字字符即使编辑了也输入不进去.这种需要通常就需要在input事件触发时就利用正则验证来实现了.以手机号为例: html <div class="e"> <label>手机号</label> <input c…

(一)eslint静态检查 在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义了却未使用的变量 3.结尾多余空格 4.超过一行的空行 5.代码尾行应该有空行 错误肯定是列举不完的,那么提示错误的时候,我们应该先去看提示信息(翻译),如果发现没有错误,可以对照eslint的官方文档 在大家适应了eslint的写法后,效率和正确率会直线上升,这里安利下我的另一篇文章,提升效率的e…

1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced -S (开发.运行都依赖) postcss-aspect-ratio-mini postcss-px-to-viewportpostcss-write-svgpostcss-cssnextcssnanopostcss-viewport-units 3.配置  .postcssrc.js module.…

属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true…