vue
吹过麦田的风
四海之内皆兄弟。
展开
-
Vue 3.0 尝鲜快速进阶
在 2019 年发布了 Vue 3.0 预览版源码,预计 2020 年年末会发布 3.0 正式版。新版 Vue 3.0 计划并已实现的主要架构改进和新功能:- 编译器(Compiler) - 使用模块化架构 - 优化 "Block tree" - 更激进的 static tree hoisting 功能 (检测静态语法,进行提升) - 支持 Source map - 内置标识符前缀(又名&a...原创 2020-05-25 17:00:24 · 471 阅读 · 0 评论 -
开发一个基于 Vue2.0 的个人天气预报
本场 Chat 是一个基于 Vue 的个人天气预报项目,就是兴趣所致,做来玩玩。顺便扩展一下知识面。本项目会采用高德地图 API,Echarts 可视化库和 Vue 相关的技术来开发本项目。有兴趣的同学,可以一起来玩玩。本场 Chat 你将学到如下内容:学会制作自己的天气预报; 学会使用部分高德地图的 API; 学会使用 Echarts的部分 API; Vue+Webpack 相...原创 2019-07-05 11:55:45 · 2239 阅读 · 0 评论 -
Vue+Better-Scroll 实现多Tab上拉加载更多实例
本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例,像这种多 Tab 切换加载更多的场景,不管在 PC 端还是移动端都还挺常见的,比如商城类,订单中心等。本人在项目中也经常用这种,已经轻车熟路了,所以就想做个总结出来,并做成一个实例 Demo,把经验分享出来,供同样有所需的前端同学学习。本项目使用 Vue 和 Better-Scroll 相...原创 2019-07-05 11:40:22 · 806 阅读 · 0 评论 -
仿美团城市选择器的 Vue 插件开发实例
本文是讲一个基于 Vue 的仿美团城市选择器的插件开发实例,目前关于城市选择器的插件比较少,在自己做项目的时候一直没有找到合适的城市选择器插件,所以自己开发了一个。同时也想把这个插件分享给出来,供同样有所需的前端同学学习使用。本项目使用 Vue 和 Vue 插件相关的技术来开发本项目。通过学习本项目,不仅可以拥有自己的城市选择器插件,还可以学到 Vue 插件的开发过程以及 NPM 发布包的相关...原创 2019-01-13 12:02:54 · 4753 阅读 · 0 评论 -
Node.js+MySQL+Vue 的全栈实战项目:星辰笔记
本项目是一个基于 Node.js 的全栈是实战项目,目标就是带领读者朋友上手实战。众所周知全栈工程师是要比纯前端有发展前景的,非常希望本篇文章能给朋友们带来一些收获。该实战项目主要有首页、登陆、注册、笔记分类,笔记列表,笔记详情,发布笔记和个人主页八个部分。项目虽小,五脏俱全,设计的知识面还是比较全面的。相信通过学习本场 Chat,看完本篇文章并自己跟着认真做过一遍的同学,一定会对全栈知识...原创 2018-12-18 10:27:11 · 8722 阅读 · 1 评论 -
vue webpack项目打包优化,从60s到17s的优化之路
下面就进入本文的正题了:对本文感兴趣的,想必都有一定的开发经验了,对webpack工具也有了一定的了解。只是在webpack生态里面有太多的插件了,除了默认推荐的插件之外,不知道怎么找更好用的插件,其实当初,我也有和你一样的困惑,只是我喜欢钻研,喜欢尝试。基于webpack的项目啦都有一个弊端,项目体积越大,打包耗时越长。下面就把我优化项目的案例展示给你。激动么~~~Vue项目比较大.或...原创 2019-03-07 17:51:32 · 5558 阅读 · 1 评论 -
vue+webpack项目打包优化,从60s到17s的优化之法
有的 Vue 项目比较大.或者说项目中引入了许多第三方库,那么在执行 npm run build 构建项目的时候会极其的慢.比如我现在的项目就每次打包就要大概60s的样子。可能大家也会遇到如下同样的问题: 一,npm run build 构建项目耗时较长 二,打包出来的文件太大 三,打包前需要手动删除dist文件 通过学习本文,以上这些都不是问题。 通过学习本文,你讲学会如何优化自己的项目。 通过...原创 2018-11-15 17:01:00 · 848 阅读 · 0 评论 -
vue+better-scroll实现多tab选项卡上拉加载更多的实践例子
闲话少说,先上效果项目中会经常遇到类似这样的多tab切换的需求,tab可以点击,可以滑动。每个tab的内容还需要上拉加载刷新。没有办法,好好研究一下,做个记录。以防来日不时之需。还有对vue不熟悉的,可以先去看看这个vue+webpack 从入门到精通(基础篇)项目中上拉加载用到了很好用的工具better-scroll,各位可能都知道。关于better-scroll详细的...原创 2018-09-30 14:23:09 · 4201 阅读 · 1 评论 -
vue项目打包后首页一片空白解决办法和具体原因总结
很高兴在万千文章中你看到本章,希望能为你解决问题!!!在最初用vue+webpack+vue-router做项目的时候,在本地pc开发测试都是正常的,但是在把代码打包部署到测试服务器之后,访问项目首页总是白屏。第一种,打包后的dist目录下的文件引用路径不对,会因找不到文件而报错导致白屏。解决办法:修改一下config下面的index.js中bulid模块导出的路径。因为index.h...原创 2018-08-20 19:47:03 · 35507 阅读 · 15 评论 -
vue+axios全局注册环境变量和全局接口拦截黑科技
axios 用了有一段时间了,可能对于刚入手的同学来说,和vue-resource没啥区别。但是有没有相关,为啥那么多人喜欢用axios,而不用vue-resource啦。axios有很多的黑科技,比如全局注册变量,全局拦截等等,对于开发来说,可以节省很多事儿!!!一、安装axios老规矩,要想使用axios,我们得安装它,安装方式:npm install axios --save二,...原创 2018-07-18 12:56:40 · 3654 阅读 · 1 评论 -
vue+webpack把px转化成rem的实战例子
第一,首先需要本地安装node环境和配置。第二,npm全局安装vue-cli。第三,通过vue的脚手架初始化本地项目vue init webapck project-name这里会自动安装基础依赖,先npn run dev一下,是否运行正常!第四,安装 npm install postcss-px2rem postcss postcss-loader--save 第...原创 2018-07-17 12:05:58 · 3299 阅读 · 2 评论 -
vue项目如何全局注册过滤器(filter)
前言:一个vue项目中难免会遇到一些地方需要用到filter,那么怎么写,才能在各个组件中肆意使用啦.一,在static目录下新建一个filter目录,在filter目录下创建一个filter.js文件这里举一个给商品价格精确不足两位的补0,比如22.2->22.20,22->22.00看代码:/** * 给商品价格加补0 * @param {*} value */const add...原创 2018-06-22 10:14:52 · 7996 阅读 · 0 评论 -
vue+webpack 从入门到精通(基础篇)
所谓工欲善其事必先利其器,众所周知vue+webpack的开发需要本地安装node环境(有还不知道的就先去知道知道再来看本博的文章吧)。一、nodejs下载,安装和配置本地环境,就自己百度一下,网上有很多的文章,此处就不再赘述。二、全局安装vue 的脚手架工具vue-cli。npm install -g @vue/cli三、全局安装webpack。npm install -g webpack四、到...原创 2018-04-05 23:17:30 · 4240 阅读 · 3 评论 -
vue 插件开发教程与发布
前言对于插件的好处就不用多说了~~~~看了vue官方的vue插件开发的文档,讲的比较粗略,看完一头雾水的,所以决定自己研究开发了一个组件,并写成一个教程。就拿基于vue的一个toast组件开始吧项目初始化封装vue的插件用webpack-simple很合适,vue init webpack-simple project-name此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的lib目...原创 2018-04-16 00:04:13 · 3594 阅读 · 0 评论 -
vue+webpack 从入门到精通(二)
还对vue+webpack不熟悉的同学,请走这边:vue-cli+webpack 从入门到精通(基础篇)这篇正式进入主题了,先来个数据渲染。在vue中渲染数据很方便,这也是喜欢vue的原因之一。准备工作-———1.首先在根目录下新建一个data.json文件2.在components目录下新建一个组件ElmIndex.vue(组件名字随便取)3.在router下的index.js文件中给新建的El...原创 2018-04-14 20:07:01 · 4640 阅读 · 0 评论 -
vue+webpack项目中px2rem的例子
引言:gitchat里有更详细的实战例子Vue+Webpack 把 PX 转化成 REM 的实战例子 本文重点:项目环境搭建此处省略,不再赘述,需要的请查阅相关资料。本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装 npm install postcss-px2rem postcss --save 第...原创 2017-12-07 14:26:28 · 13996 阅读 · 9 评论