随笔分类 - vue项目
摘要：（1）基本用法 1、本地安装npm install <package name>，缩写install缩为i 2、全局安装npm install -global <package name>，缩写global缩为g 3、git地址安装 4、强制force（武力、军队）安装 5、删除node_modul
阅读全文
摘要：先不要着急看锁文件作用，我们一步一步来看它的形成 （1）初始化项目 npm init [--yes]表示跳过导航阶段 关于详细的npm用法，详见下节文章npm模块管理器 所以，当我们使用npm init初始化项目时，便生出了package.json 项目说明文件 除此之外，还拓展了关于script字
阅读全文
摘要：本文转自阮一峰老师教程，链接：http://javascript.ruanyifeng.com/nodejs/packagejson.html# 目录 概述 scripts字段 dependencies字段，devDependencies字段 peerDependencies bin字段 main字
阅读全文
摘要：npm不仅可以用于模块管理，还可以用于执行脚本。package.json文件有一个scripts字段，可以用于指定脚本命令，供npm直接调用。 接下来做个简单测试： （1）在项目根目录下创建demo.js 接下来运行demo.js，直接运行如下 那如果将其放到script里，可以通过npm run指
阅读全文
摘要：前端必备自定义滚动库——iScroll iScroll是什么 很多场景，如果使用body的滚动会很不方便，这时候，就会使用某个元素的局部滚动，恶心的事情就会发生了。 pc端web，windows系统的浏览器会出现丑陋的滚动条。(其实也有最新的css样式可以解决，兼容性欠佳) 手机移动端，ios浏览器
阅读全文
摘要：客户端渲染+服务器端渲染 1、客户端渲染 所以一般会发两次请求，第一次请求页面字符串，第二次请求数据 2、服务端渲染 当然，ajax等异步请求也会用到，只是看具体应用场景 3、如何判断网页是客户端渲染还是服务器渲染 查看网页源代码，如果源代码里有页面对应内容，则是服务端渲染。如果没有页面对应内容，则
阅读全文
摘要：一、概述 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 ES6中，
阅读全文
摘要：导语：随着大数据的发展，数据可视化成了我们日常开发中普遍存在的一种需求。现在我就日常工作过程中的可视化开发总结一下，回顾一下，本篇使用百度开源的echarts库来做案例。 echarts资源 echarts官网 echarts Github 下载并引入echarts 下载echarts npm in
阅读全文
摘要：前言 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢... 前端进阶积累、公众号、GitHu
阅读全文
摘要：当做Vue-cli项目的时候感觉在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、
阅读全文
摘要：最近做一个移动端项目，弹框写的比较麻烦，查找资料，找到了这个组件，但是说明文档比较少，自己研究了下，把我碰到的错，和详细用法分享给大家！有疑问可以打开组件看一看，这个组件是仿layer-mobile的，很多用法都一样，可以看看哦！ 一、npm 安装 // 当前最新版本 1.2.0 npm insta
阅读全文
摘要：前言：之前没有接触过页面调用地图的项目，某次面试，老板要求我用vue-amap调用高德地图，回家以后，我去网上查了一些案例和教程，看似很简单的引入调用，我却整整弄了一宿，还没弄出来！！！百般无奈之下，我选择第二天重头来过，一定要找到什么原因... 结果！血的教训告诉我，记录教程的时候，一定要有实践基
阅读全文
摘要：懒加载优化 （1）前言 利用vue-lazyload实现图片懒加载，下面介绍下具体使用步骤 （2）下载安装第三方模块 （3）引入并激活相关参数 （4）组件调用 使用方法很简单，将图片的:src改为v-lazy即可，如下所示 此时效果如下 因为之前设置的img宽度为100，所以这里需要用到属性选择器去
阅读全文
摘要：解决方法如下 项目方案： 在最外侧添加样式操作 .
阅读全文
摘要：keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive> props incl
阅读全文
摘要：一般的，如果是静态数据（本地数据），可以直接在mounted生命周期中初始化，循环轮播、自动播放都比较正常。 但是，如果是动态从后台获取数据的话，采用上述方法会发现，轮播图无法自动播放，也无法拖拽。 解决办法：在从后台获取完数据之后再初始化swiper，同时启动动态检查器observer，当改变sw
阅读全文
摘要：【前言】 eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下 【主体】 简介eslint eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。 官方文档：https
阅读全文
摘要：我们在写vue项目的时候会遇到给组件命名 这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 ? 1 2 3 export default { name:'xxx' } 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 举个例子： 我们有个组件命名为detai
阅读全文
摘要：在一般的vue项目中，都会用到Loading或者Alert之类的弹窗浮层，而他们是一种比较高频率出现的组件。 一般情况下，我们都会去直接import该组件，然后直接以标签的形式引用进去当前页面组件中，如下图： 这种是我们比较常用的一种方法，它的好处就是让我们比较直观地对组件进行调用， 方便地通过标签
阅读全文
摘要：概念流程图： 案例： （1）src/store/index.js导出仓库 （2）在入口文件引入仓库并派发到每个组件，在入口文件main.js引入，挂载到根组件上，方便以后使用this.$store调用仓库数据 （3）组件读取显示 直接读取： 年纪：{{this.$store.person.age}}
阅读全文
浙公网安备 33010602011771号