vue及其生态圈学习
关注
分享
扫一扫
文章平均质量分 67
主要是vue及其生态圈的一些框架、工具等使用记录和采坑记录
牛长犇
享受写东西的过程，记录技术上的成长
展开
-
eslint -- Adjacent JSX elements must be wrapped in an enclosing tag
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言关于eslint的问题太多了，我们只能慢慢的一个一个的踩坑。错误信息Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.这样的错误信息提示eslint配置的问题，如下图解决办法修改eslint配置文件// 将"...原创 2018-12-17 14:41:31 · 17489 阅读 · 3 评论 -
vue -- foreach not a function 或者map not a function的解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言老套路，先说出现这种问题的原因：在做vue项目时，如果我们在组件中需要一个变量，哪怕这个变量最开始是没值的，我们也必须先在data中注册这个变量；只有这样，我们的这个变量才能是响应式的，不然就失去了响应式的功能；问题就在这里，好多人的习惯就是写变量的值等于’’(空)或者null，map和foreach方法只能对数...原创 2018-12-05 16:48:52 · 16528 阅读 · 4 评论 -
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发；这是一种设计模式，和语言没有关系；如果不太了...原创 2018-11-30 12:00:55 · 6934 阅读 · 19 评论 -
vue -- 父组件通过$refs获取子组件的值和方法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在vue项目中组件之间的通讯是很常见的问题，同时也是很重要的问题，我们大致可以将其分为三种情况：父传子：在父组件中绑定值，在子组件中用props接收子传父：在父组件中监听一个事件，在子组件中利用$emit触发这个事件并带上数据作为第二个参数，这时父组件中监听事件的回调函数就会被调用，回调函数的参数就是子组件带上来的...原创 2018-11-15 17:29:31 · 33537 阅读 · 1 评论 -
vue -- Cannot set property 'render' of undefined解决方法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在用vue-cli3做组件测试时，出现个问题，记录一下报错如下 Cannot set property ‘render’ of undefined解决方案后来发现是因为 组件里写了script标签，没写 export default {}加上这句话之后就好使了我的个人博客地址：http://www.xiaol...原创 2018-11-15 17:27:23 · 35471 阅读 · 5 评论 -
You are using the runtime-only build of Vue where the template compiler is not available. Either pre
欢迎访问我的个人博客：http://www.xiaolongwu.cn在升级脚手架到vue-cli3.0版本的时候出现了这个报错：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the template...原创 2018-10-19 20:33:40 · 106532 阅读 · 25 评论 -
《深入浅出Vue.js》作者谈前端框架的“御剑之道”
欢迎访问我的个人博客：http://www.xiaolongwu.cn编者按：本文作者 Berwin，W3C性能工作组成员，360导航高级前端工程师。《深入浅出Vue.js》（正在出版）作者。你在使剑，是的，但是你的目的是杀人，直追你的目标，忘记手中长剑，才能使出最高的剑法… 而这世上又有多少剑客， 拘泥于手中快剑而落入俗套，终究无法到达登峰造极的境界… ----阿莱克西斯前言剑，...转载 2018-10-10 17:42:14 · 12335 阅读 · 2 评论 -
nodejs入门（一）
欢迎访问我的个人博客：http://www.xiaolongwu.cn什么是NodeJSJS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行...原创 2018-09-13 19:00:51 · 5963 阅读 · 0 评论 -
npm常见命令
欢迎访问我的个人博客：http://www.xiaolongwu.cnnpm的常见命令下载安装某个模块 npm install -D（添加到开发环境）/-S（添加到生产环境）使用以下命令来卸载模块 npm uninstall 查看所有全局安装的模块 npm list -g查看依赖的某个模块的当前版本号 npm list -g //不带-g为此项目内查找...原创 2018-09-22 22:54:38 · 756 阅读 · 0 评论 -
nodejs -- Node Sass does not yet support your current environment解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在github上clone了一个项目，npm install之后，启动项目时报了如题目的错误导致项目启动失败；产生问题的原因执行npm install命令时，其实是npm按照项目里的package.json文件来下载项目所有的依赖；由于每个人的电脑环境等不同的问题，有些依赖会不支持当前的环境；...原创 2018-09-15 18:12:22 · 10800 阅读 · 3 评论 -
nodejs -- node-sass安装失败的解决方案
欢迎访问我的个人博客：http://www.xiaolongwu.cnnode-sass安装失败的原因是被墙了；解决办法是翻墙或者使用淘宝镜像cnpm下载；cnpm install node-sass -Dcnpm的安装和使用方法链接：cnpm淘宝镜像的安装和使用方法我的github资源地址：nodejs – node-sass安装失败的解决方案我的个人博客地址：h...原创 2018-09-15 18:16:12 · 2927 阅读 · 0 评论 -
webpack -- require和import机制
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言虽然我们很多人每天都在写项目，require或者import写的爽得很，但是有几个人真正的知道它背后的运行原理和所谓的规则机制。开始我们基于webpack开发，就拿基本的vue项目来举例子吧假如我们项目中要用到vue这个框架，我们在代码里写上import Vue from 'vue'/...原创 2018-08-13 02:30:38 · 5763 阅读 · 0 评论 -
webpack -- 简单的使用总结
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言这里只是大概的简单的使用总结，要想深入的理解还需自己一点一点的在实际的工作中积累。webpack是什么webpack是一个前端构建的打包工具（并不是什么库或框架）， 它能把各种资源，例如JS（含JSX）、coffee、css（含less/sass）、图片等都作为模块来处理和使用。基础知识点...原创 2018-08-13 02:31:32 · 578 阅读 · 0 评论 -
commonjs,es6模块的编写规则，适用于node，webpack，rollup
欢迎访问我的个人博客：http://www.xiaolongwu.cn一、commonjs的编写规则首先说明一下，commonjs模块规范被广泛使用在nodejs中，webpack也支持，rollup如果要支持则需要安装两个插件，rollup-plugin-node-resolve和rollup-plugin-commonjs也可以参考下这篇博文：require和import机制...原创 2018-08-15 15:06:18 · 1064 阅读 · 0 评论 -
vue.js开发神器devtools的安装方法
欢迎访问我的个人博客 http://xiaolongwu.cn/1、安装去gitHub上clone项目，地址 https://github.com/vuejs/vue-devtools 【传送门】下载好后进入vue-devtools-master工程 执行npm install —–>npm run build.修改manifest.json 中的persistent为...原创 2018-02-08 00:53:05 · 30616 阅读 · 8 评论 -
vue中v-if和v-show的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/相同点两者都是在判断DOM节点是否要显示。不同点1、实现方式v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。2、编译过程v-if切换有一个局部编译/卸载的过程，切换过程...原创 2018-02-08 00:52:51 · 16375 阅读 · 1 评论 -
vue中如何实现样式之间的切换
欢迎访问我的个人博客 http://xiaolongwu.cn/前言既然我们选择了vue，那么在做东西时就不要想着再jQuery用去操作dom，所有的都交给vue来解决。下面来说一个很简单但是很常用的效果，可能人人都会遇到这样的需求请看下图导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢，代码如下ht...原创 2018-02-08 00:52:38 · 34433 阅读 · 6 评论 -
vue数据绑定数组，改变元素时不更新view问题
欢迎访问我的个人博客：http://xiaolongwu.cn前言关于这个问题，官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @c原创 2018-03-19 20:15:01 · 30991 阅读 · 9 评论 -
我们为什么要用vue，他解决了什么问题，如何使用它？
欢迎访问我的个人博客：http://xiaolongwu.cnVue.js新手入门指南最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以...转载 2018-04-16 19:06:01 · 54250 阅读 · 33 评论 -
最新vue-cli 2.9.1和2.8.x版本的区别
最近vue-cli更新，用其构建项目的时候，发现bulid文件下少了两个文件，分别是dev-sever.js和dev-client.js vue-cli 2.8 vue-cli 2.9.1 这是为什么呢 我们查看下package.json vue-cli...转载 2018-04-18 20:05:20 · 4421 阅读 · 0 评论 -
vue-cli的webpack模板项目配置文件分析
2017-09-11更新：更新到webpack 2.6.1所对应的配置，完善部分代码注释。由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发...转载 2018-04-20 17:34:31 · 370 阅读 · 0 评论 -
Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览...转载 2018-05-10 17:41:34 · 701 阅读 · 0 评论 -
vue -- 理解Vue.nextTick 的原理和用途
有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。next...转载 2018-07-05 16:59:54 · 6098 阅读 · 0 评论 -
vue -- 如何去掉url默认的锚点#
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言vue项目中持续踩坑做一些记录，以便后面翻阅项目的url中会自带#，看起来很不是舒服，其实是vue-router在搞怪，router跳转有两种实现方式： 1. hash（带#）值模式，vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变...原创 2018-07-23 16:45:08 · 11113 阅读 · 3 评论 -
cmder 添加到右键菜单时提示 Access is denied解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言关于cmder优点和如何下载，还有它的min版和完全版有啥区别，我在这里就不说了，网上文章一大堆，请自行搜索，我在这里只说首次安装存在问题最多的地方每次用cmder手动一层一层的进入目标文件夹，是一件很麻烦的事儿。所以，将cmder添加到系统右键菜单是个很好地解决方法。就像使用git bash那样的方便；...原创 2018-04-10 19:47:11 · 4068 阅读 · 0 评论 -
cnpm淘宝镜像的安装和使用方法
欢迎访问我的个人博客 http://xiaolongwu.cn/写在前面的话npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。国内优秀npm镜像淘宝npm镜像搜索地址：http://npm.taobao.org/ ...转载 2018-02-08 00:56:22 · 30173 阅读 · 0 评论 -
--save-dev 与 --save的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/-save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。-save是指将包信息添加到dependencies，表示你发布时依赖的包裹...原创 2018-02-08 00:52:24 · 1359 阅读 · 1 评论 -
Node中导入模块require和import傻傻分不清楚
ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。不把require和import整清楚，会在未来的标准编程...转载 2018-06-29 09:46:08 · 5174 阅读 · 0 评论 -
webpack进阶——DllPlugin优化打包性能（基于vue-cli）
介绍：打包会输出一个类dll包（dll包源于windows的动态链接库），这些代码本身不会执行，主要是提供给我们的业务代码引用。（比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行时间格式化）。简言之：将静态资源...转载 2018-05-04 15:46:32 · 2101 阅读 · 0 评论 -
gulp & webpack整合，鱼与熊掌我都要！
为什么需要前端工程化？ 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代，近年来很多相关的工具和概念诞生。好奇心日报在进行前端工程化的过程中，主要的挑战在于解决如下问题：如何管理多个项目的前端代码？如何同步修改复用代码？如何让开发体验更爽？项目实在太多之前写过一篇博文...转载 2018-05-07 09:46:51 · 1707 阅读 · 0 评论 -
webpack -- require和import的区别
我之前在&nbsp;《前端搭环境之从入门到放弃》这篇文章中吐槽过，webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上...转载 2018-06-29 09:49:15 · 1201 阅读 · 1 评论 -
报错 throw new Error('invalid "instanceof" keyword value ' + c)解决办法
显示如下报错D:\myProjectDemos\webpackDemo\node_modules\ajv-keywords\keywords\instanceof.js:52 throw new Error('invalid "instanceof" keyword value ' + c); ^Error: invalid "instanceof" keyword v...原创 2018-07-06 17:45:46 · 8788 阅读 · 4 评论 -
webpack -- 热更新原理
开发环境页面热更新早已是主流，常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等，都需要借助热更新功能，才能达到实时的端对端的极致体验。webpack-hot-middlewarewebpack-hot-middleware中间件是webpack的一个...转载 2018-07-13 14:44:00 · 6023 阅读 · 0 评论 -
webpack -- 资源和css中图片引用打包为相对路径的方案
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言最近在用vue-cli+webpack做项目，项目架构搭好了之后，想build之后看看效果，但是build出来的index.html文件中的默认资源引用都是绝对路径，也就是相对于根目录的绝对路径；但是我项目如果部署到线上也不一定是在根目录里呀，所以这种默认相对于根目录的绝对路径肯定是不实用的；解决方案...原创 2018-07-18 20:58:30 · 15098 阅读 · 2 评论 -
webpack -- 关于proxyTable的配置在开发环境和生产环境中的原理解析
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言首先，proxyTable是我们在本地开发环境中调试接口用的，目的是为了解决本地跨域的问题，因为本地地址为localhost:xxxx/xxx在线上的生产环境是没用的！！！假设我们用的是vue-cli命令行工具生成的webpack项目模板，我们很容易能在config文件夹下面找到index.js文件。...原创 2018-07-19 16:52:46 · 19459 阅读 · 17 评论 -
vue -- vue-router的history模式打包后页面空白的解决方案
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言采坑记录，以便后面翻阅首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案问题现象在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台...原创 2018-07-25 19:18:49 · 29264 阅读 · 2 评论