问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。 解决方案 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发环境--> <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> <!--生产环...
最近在尝试用nuxtjs来搭建新的站点，但是平时在jquery里面用惯的一些插件一到vue上面引用就各种不顺畅~本文记录一下在用Swiper插件来做轮播图的时候遇到的问题~至于怎么在vue里面引用插件就不累赘了，npm能告诉你~ Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里，所以在style scoped中写的样式无法作用到分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整，仅用做说明) template：scri...
我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"><ul><li>{{ item.message }}</li></ul> </div>结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我按照不在一个层级上改，果然好用了 <ul id="example-1"><li v-for="item in items">{{ item.message }}</li> </ul>以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给大家的...
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访...
遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。 问题原因 在webstrom系统设置中有一项配置，是 Use “safe write”(save changes to a temporary file first) 。webstrom是自动保存的，如果勾选Use “safe write”，编辑的文件首先会保存到临时文件中...
如下所示： Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers今天遇到一个问题，将Vuex中数组的值赋给新的数组，新数组push时报上面的错误，代码如下 <code class="language-javascript">this.maPartListTable = this.$store.state.vehicleMa.maPartListTable; </code> this.maPartListTable.push(obj);经询问后得知，应该这么写 this.maPartListTable = this.$store.state.vehicleMa.maPartLi...
webpack 打包后动画未执行， 就是npm run build后在dist中生成的项目中动画未生效 解决： 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图下面看下vue-cli 打包后自定义动画未执行的解决方法 在vue项目中，想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行，就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0; } 100% { top:-500px; } } 解决方法：在vue项目中...
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播； 那么可以这样写代码试试： this.$api.queryImages().then((resp) => {if(resp && resp.data.resultCode == "0"){this.swiperImgs = resp.data.data;this.$nextTick(() => { // 下一个UI帧再初始化swiperthis.initSwiper();});} })是的，关键就在于上面这个初始化swiper的调用了，一般会用v-for循环...
记录一下踩坑 前几天，从同事手上接手了一个Vue的项目。（Ps：刚入职两周，老哥还专门写了一个readMe，感谢）； 问题来了，从gitLab上面把项目上clone下来了，node环境什么的都配置好了， npm install npm run dev无法运行，报错信息如下：> NODE_ENV=development webpack-dev-server --open --inline --hot NODE_ENV 不是内部或外部命令，也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错，报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现，用真机又会出现，不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论：Loading chunk {n} f...
最近有个新需求，表单要求增量提交，但是身份证要求无则可提交，有错无法提交，只能新写个校验，但是还不能进组件就监控，后来发现watch有个immediate 选项 watch:{"aaa":{immediate:true,handler:function(){} } 以上这篇vue首次赋值不触发watch的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
如果在prop中传的值为一个没有使用特殊命名规则的变量如:（type），可以顺利传值：<code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: [type], template: <div @click="a">我是按钮{{type}}</div>, methods: { a() { console.log(this.type); } } }); var app = new Vue({ el: #app, data: { type: test } });</code> 而当这个变量为驼峰命名法如：（selectName）...
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from ./components/tab/TabOne import Tab2 from ./components/tab/TabTwo import Tab3 from ./components/tab/TabThree ...
1.npm安装 npm install babel-polyfill npm install es6-promisepackage.json中会出现"babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1",2.main.js引入 import babel-polyfill import Vue from vue import Es6Promise from es6-promise require(es6-promise).polyfill() Es6Promise.polyfill()3.webpack.base.conf.js module.exports = { entry: { "babel-polyfill":"babel-polyfill", app: ./src/main.js },总结 以上所述是小...
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app...