今天在起别人项目的时候， 发现报错。这个错误是，项目中不识别es6的扩展运算符， 解决方式很简单。 // 第一步 cnpm install babel-plugin-transform-object-rest-spread// 第二步 看一下你的 .babelrc 里面是否有识别es6语法的配置 {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"presets": [["es2015", { "modules": false }]],"plugins": ["trans...
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 <template><div id="app"><router-view/></div> </template><script> export default {name: App } </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50; } </style>这时候设置height:...
如何产生 在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下 //// vue 组件 <template><div class="box" data-v-33f8ed40></div> <template>//我用js在上面div标签中插入一个<p class=text>text goes here</p><script>export default {...mounted(){$(.box).html(<p class="text">text goes here</p>)},...} </script> //style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性 <style scoped> //样式添加了s...
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: /history, // ...
单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。 解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件 官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promis...
今天在初始化项目中，出现了一个奇怪的情况：明明路径是对的，但是编译的时候，一直报“This dependency was not found”的错。代码如下： import Vue from vue import App from ./App import router from ./router import common/stylus/index.styl /* eslint-disable no-new */ new Vue({el: #app,render: h => h(App) })控制台一直报错，表示无法找到common/stylus/index.styl，然而，路径是通过ide补全填写的，不可能出现错误，...
问题描述： 最近在做登录部分时遇到一个场景，当点击 “用户”按钮时，首先渲染login组件，在用户登录后直接跳转到用户信息界面（user组件）。这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件，但是login和login组件不是父子组件，就暂称为兄弟组件吧。 简而言之，我要解决的就是兄弟组件之间的信息传递问题。 //位于login.vue 中 export default { methods:{ login(){ this.$axios({ method: post, url: /stu...
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程。参考了很多的文档,终于成功进行了部署。在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助。对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器。买了一个域名。没有备案的域名也可以使用。买完服务器进行域名解析。点击添加解析,按照下面这样填写就行 马赛克是你的外网ip可以根据你需要的...
今天使用vue调试页面，发现了页面上的一个问题，后台数据传过来的HTML字符串并没有被转换为正常的HTML代码，一拍脑门，发现忘记转换了，于是满心欢喜加上了{{{}}}。但是之后构建发现报错： 为此去官网上查了下资料，发现在vue2.0版本中，{{{}}}转换HTML的方式已经被废除，该版本中必须使用v-html标签进行转换，下面是具体的使用方法： <span v-html="htmlData">{{htmlData}} </span>总结以上所述是小编给大家介绍的VUE.js 中取得后...
使用vue+better scroll今天实现切换用户后查询用户订单列表的一个功能，在实例化betterscroll时，因为有的用户没有订单，切换用户后会出现订单列表无法滚动的问题。先放代码： <!-- 订单列表 --> <div id="order-list" ref="scrollWrap"><ul v-if="orderLists.length > 0"><li v-for="(orderList,index) in orderLists" :key="index"><div class="order-info"> 订单信息 </div></li></ul><div class="no-orders" v-else><p>最近没有...
浅谈关于.vue文件中的style的scoped属性注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。 1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要修改公共组件（第三方库或者项目中定制的组件）的样式的时候，scoped会造成很多困难，组要增加额外的复杂度。 一、创建公共组...
正常路由嵌套是没有问题的，但是如果你已经在当前主路由页面了，然后再次点击主路由就会出现页面数据空白的情况 看代码： //主路由通过v-for循环出来 <div class="list-group"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="doNothing" class="list-group-item" v-if="getPages.length != 0">数据统计</a><router-link v-for="page in ge...
首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖 static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包...
初学框架vue搭配vux使用发现这个UI库使用有些力不从心。下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。 1.使用x-input组件可知，官方只给了三种类型的is-type验证器，分别是：email,china-name,china-mobile，其他需要自己自定义验证器，怎么写验证器？ 解决方法：自定义is-type验证器（试验过可以在valid使用正则验证） <x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />...
1.webstorm中es6语法报错，解决方法： 打开 Settings => Languages & Frameworks => Javascript把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错，但是.vue文件中es6语法依然报错。 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue这样vue文件就相当于html文件，可以编辑css，js，也都有智能提示。但是，在.vue文件中es6语法还是报错。 (2).粗暴：直接在<scrip...